<body>
<!-- viewBox="0 0 100 100"中的100表示百分比缩放，以后的单位都可以直接写数字不用加单位 -->
<svg width="500px" height="500px" style="background:#bfa">
<!-- 矩形 -->
<!-- 标签g类似html中的group标签，组的意思 -->
<g id="group">
<!-- <rect x="0" y="0" fill="red" width="20" height="10" /> -->
<!-- <rect x="0" y="0" fill="red" width="20" height="10" transform="translate(70,0)" /> -->
<!-- <rect x="0" y="0" fill="red" width="20" height="10" transform="scale(2)" transform-origin="center" /> -->
<!-- transform-origin="center"易元素中心为原点缩放，此时元素看不到，还需要加上style="transform-box: fill-box" 不然会以整个svg中心为原点 -->
<!-- <rect x="0" y="0" fill="red" width="20" height="10" transform="scale(2)" style="transform-box:fill-box; transform-origin:center;" /> -->
</g>
<rect x="0" y="0" fill="red" width="20" height="10" transform="scale(2)rotate(45)" style="transform-box:fill-box; transform-origin:center;" />
<!-- 矩形 fill表示填充色 stroke表示边框 stroke-dashoffset表示虚线边框的间距-->
<rect x="10" y="10" fill="blue" width="20" height="10" fill="transparent" stroke="black" stroke-width="1"
stroke-opacity="0.8" stroke-dasharray="1 2 3" stroke-dashoffset="10" />
<!-- svg大多数属性都可以写道svg中 -->
<!-- polygon表示多边形 point表示每个点，每个点的xy用逗号隔开，每两个点用空格隔开 最后要记得和原点闭合-->
<polygon points="0,0 10,0 20,5, 5,5 0,0" />
<!-- circle表示圆 -->
<!-- cx cy表示中心坐标 -->
<circle cx="20" cy="30" r="5"></circle>
<!-- ellipse表示椭圆 rx表示x轴半径 ry表示y轴半径 -->
<ellipse cx="40" cy="30" rx="10" ry="20" />
<!-- 线条 线条是没有填充色的-->
<line x1="70" y1="10" x2="70" y2="20"
stroke="black" stroke-width='3' />
<!-- 折线 -->
<polyline points="45,0 50,0 50,15 40,15 45,0" fill="red"
stroke="black" stroke-width="1" />
<!-- 文本 -->
<text x="10" y="50" style="font-size: 10">Hello</text>
</svg>
</body>
弯曲字体
<path id="aaa" d="M 10,10 T 30,30 90,10" fill="red" />
<text width=" 100" x="50">
<textPath letter-spacing="2" xlink:href="#aaa" style="font-size: 5;" fill="yellow">智慧能源</textPath>
</text>
