一、基本图形实例

svg属性version-1.0或1.1，xmlns（命名空间，参考）- http://www.w3.org/2000/svg

实现效果

源码

说明：

• 1.大写字母代表相对原点(0, 0)的绝对坐标，小写字母代表相对当前位置移动相对距离
• 2.M(a)-移动到坐标点，V(v)-画垂直线，H(h)-画水平线(z)-回到路径起点
• 3.C(c)-绘制三次贝塞尔曲线，参数：2个控制点、终点（起点为当前位置点）
• 4.S(s)-绘制跟前面曲线连接的平滑三次贝塞尔曲线，参数第二个控制点、终点（起点为前面曲线结束的位置点第一个控制点自动设为前一个曲线的第二个控制点的对称点，若前面没有C或S，则起点和第一个控制点均为起点位置）
• 5.Q(q)-绘制二次贝塞尔曲线，参数：一个控制点+终点 T(t)-前面为Q或另一个T时，控制点自动生成，参数：终点；前面为其他命令则画出直线
• 6.A(a)-绘制弧形(椭圆的一段线条),参数:2个半径长度(rx,ry)、x轴的旋转角度(-360到360)、弧线跟中心的组成的角度是否大于180°(1或0)、弧线从起点到终点是狗为顺时针方向画弧线(1或0)、终点坐标(x, y)

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <rect x="10" y="10" rx="2" ry="2" width="50" height="50" fill="red" stroke="white" stroke-width="2"></rect>
    <line x1="10" y1="70" x2="60" y2="120" stroke="white"></line>
    <circle cx="95" cy="35" r="25" stroke="white"></circle>
    <ellipse cx="180" cy="35" rx="50" ry="25" stroke="white" stroke-width="2" fill="#00aaf2"></ellipse>
    <polyline points="70 70 130 70 70 130 130 130" stroke="orange" fill="transparent">
    </polyline><polygon points="200 90, 180 120 220 120" stroke="#00aaf2" fill="white"></polygon>
    <path d="M 10 130 L 310 130 v 180 h -300 Z" stroke="white" stroke-width="2" fill="transparent"></path>
    <path d="M 10 160 C 10 180, 50 180, 50 160 S 100 140 , 100 160" stroke="#00aaf2" fill="transparent"></path>
    <path d="M 120 160 S 160 180, 160 160 S 200 160, 200 160" stroke="#00aaf2" fill="transparent"></path>
    <path d="M 10 190 Q 30 220, 50 190 T 90 190" stroke="red" fill="transparent"></path>
    <path d="M 100 190 T 120 190" stroke="red" fill="transparent"></path>
    <path d="M 10 220 L 20 220 A 20 30 -45 1 0 100 250 h 20" stroke="green" stroke-width="3" fill="white"></path>
</svg>

二、应用实例

1.背景填充图案

code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 200 200">
    <defs>
        <pattern id="pt" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="30" y2="30" stroke="#00aaf2"></line>
            <circle fill="white" stroke="red" cx="15" cy="15" r="10"></circle>
        </pattern>
    </defs>
    <rect x="10" y="10" width="180" height="180" fill="url(#pt)"></rect>
</svg>