SVG制作简单的图形

圆形 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>