圆形 circle

<svg width="200" height="200" >

    <circle

	    cx="100"

	    cy="100"

	    r="80"

	    stroke="green"

	    stroke-width="4"

        fill="none"/>

</svg>

矩形 rect

<svg>

    <rect

        x="10"

        y="10"

        rx="5"

        ry="5"

        width="150"

        height="100"

        stroke="red"

        fill="none">

    </rect>

</svg>

椭圆 ellipse

<svg>

    <ellipse

        cx="400"

        cy="60"

        rx="70"

        ry="50"

        stroke="red"

        fill="none">

    </ellipse>

</svg>

线 line

<svg>

    <line

        x1="10"

        y1="120"

        x2="160"

        y2="220"

        stroke="red">

    </line>

</svg>

折线 polyline

<svg>

    <line

        x1="10"

        y1="120"

        x2="160"

        y2="220"

        stroke="red">

    </line>

</svg>

多边形 polygon

<svg>

    <polygon

        points="250 120

                300 220

                200 220"

        stroke="red"

        stroke-width="5"

        fill="yellow"

        transform="translate(150 0)">

    </polygon>

</svg>

路径 path

可用于路径数据的命令

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

<svg>

    <path

    d="M250 150 L150 350 L350 350 Z" />

</svg>