<svg width="600" height="600">
    <!-- 圆心在10,10，半径是10的园 -->
    <circle cx="10" cy="10" r="10"/>

    <!-- 中心在30,30，x方向半径10，y方向半径30的椭圆 -->
    <ellipse cx="30" cy="30" ry="10" rx="30"/>

    <!-- 20,10 - 80,20的直线，注意一定要添加stroke的颜色，不然看不到这条线 -->
    <line x1='20' y1='10' x2='80' y2='20' stroke="black"/>

    <!-- 绘制一条折线，并填充黑色，所以这里画出的是三角形 -->
    <polyline points="0,50 50,50 50,100"/>    
    <!-- 将填充色设置为透明，边框设置为黑色，才会出现真正的折线 -->
    <polyline points="50,50 100,50 100,100" fill="transparent" stroke="black"/> 

    <!-- 左上角是10,100,宽和高都是100的矩形 -->
    <rect x='10' y='100' width='100' height='100'/>

    <!-- 和polyline几乎一样，只不过是会首尾相连，形成图形 -->
    <polygon points="10,210 210,250 210,300 20,300" fill="transparent" stroke="black"/>

    <!-- 一段文本 -->
    <text  x=110 y=200 style="font-size:90">这是一段文本</text>

    <!-- 路径和polyline很像，不过是M表示笔移动到，L表示划线到另一个点，小写l则表示相对移动 -->
    <path d='M 20,330 l 80,0 L 100,440' fill="transparent" stroke='black'/>
</svg>
Copy

# 从上个点到xy画曲线，x1y1 x2y2是贝塞尔控制点。看图
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
Copy

S x2 y2, x y (or s dx2 dy2, dx dy)
Copy

 Q x1 y1, x y (or q dx1 dy1, dx dy)
Copy

<!-- g分组类似于html中div -->
<g fill="red">
  <rect id = 'r1' x="0" y="0" width="10" height="10" />
  <rect x="20" y="0" width="10" height="10" />
</g>

<!-- use用于引用已存在的元素 -->
<use x=40 href='r1'/>
Copy

<!-- 平移变换 -->
<!-- 等价于x=30,y=40的正方形 ，可以写百分比，是占自身的百分比-->
<rect x="0" y="0" width="10" height="10"  transform="translate(30,40)"/>



<!-- 旋转变换，以30,40为圆心的 -->
<rect x="20" y="20" width="20" height="20" transform="translate(30,40)rotate(45)" />
<!-- 旋转变换，以00为圆心的 -->
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />

<!-- 缩放变换，以00位缩放中心 -->
<rect x="100" y="0" width="10" height="10"  transform="scale(0.8)"/>
Copy

#p1{
   fill:'transparent';    透明色
   stroke:'black';        黑边
   stroke-dasharray: 20;  虚线每20像素空出20像素
   stroke-dashoffset: 20; 虚线开始的地方偏移20像素
   stroke-opacity: 0.5;   边缘透明度0-1之间，0就全透
   stroke-width: 5;       边缘宽度
   stroke-lincap: 'round'; 线头圆角化
   stroke-linjoin: 'round'; 两线衔接处圆角化
   ....
}
Copy

animation: name duration timing-function delay iteration-count direction;
默认值为：none 0 ease 0 1 normal
Copy

<style>
    @keyframes move{
        from{left:0px}
        to{left:200px}
    }
</style>
<div style="width:100px;height:100px;background:red;position:relative;animation:move 5s infinite;"><div>
Copy

<style>
#r1{
	animation: move 5s;
}
@keyframes move
{
0% {transform:translate(0px,0px)}
100% {transform:translate(100px,0px)}
}
</style>
<svg>
	<rect id='r1' x=0 y=0 width=100 height=50 fill='red'/>
</svg>
Copy