SVG制作简单图形的实例介绍

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

    <circle

        cx="100"

        cy="100"

        r="80"

        stroke="green"

        stroke-width="4"

        fill="none"/>

</svg>

<svg>

    <rect

        x="10"

        y="10"

        rx="5"

        ry="5"

        width="150"

        height="100"

        stroke="red"

        fill="none">

    </rect>

</svg>

<svg>

    <ellipse

        cx="400"

        cy="60"

        rx="70"

        ry="50"

        stroke="red"

        fill="none">

    </ellipse>

</svg>

<svg>

    <line

        x1="10"

        y1="120"

        x2="160"

        y2="220"

        stroke="red">

    </line>

</svg>

<svg>

    <line

        x1="10"

        y1="120"

        x2="160"

        y2="220"

        stroke="red">

    </line>

</svg>

<svg>

    <polygon

        points="250 120

                300 220

                200 220"

        stroke="red"

        stroke-width="5"

        fill="yellow"

        transform="translate(150 0)">

    </polygon>

</svg>

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>