Notes:SVG(2)---各种常见图形

1.矩形rect，指定rx,ry可以得到圆角矩形

<rect x="10" y="10" rx="10" ry="10" width="150" height="150" style="fill:url(#orange_red)"/>

        <defs>

            <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

                <stop offset="20%" style="stop-color:rgb(255,255,0);

                stop-opacity:1"/>

                <stop offset="80%" style="stop-color:rgb(255,0,0);

                stop-opacity:1"/>

            </linearGradient>

        </defs>

2.圆形circle，cx,cy指定圆心，r指定半径

<rect x="10" y="10" rx="10" ry="10" width="150" height="150" style="fill:url(#orange_red)"/>

3.椭圆ellipse，cx,cy指定圆心，rx指定X轴半径，ry指定y轴半径

<ellipse cx="100" cy="100" rx="100" ry="50" style="fill:url(#orange_red)" />

4.线，指定两个点即可，(x1,y1)->(x2,y2)

<line x1="10" y1="10" x2="100" y2="200" style="stroke:url(#orange_red);stroke-width:3" />

5.折线polyline，指定多个点points每组坐标空格分开，连成一条线

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:#fff;stroke:url(#orange_red);stroke-width:1">

6.多边形polygon

<polygon points="20,20 60,20 80,40 60,60 20,60 0,40" style="fill:#fff;stroke:red;stroke-width:2"/>

7.path路径，类似canvas里面的路径：

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc
• Z = closepath

<path d="M250 150 L150 350 L350 350 Z" style="fill:red;stroke:red;"/>

效果如下：