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>

以上就是SVG制作简单图形的实例介绍的详细内容，更多请关注双恒网络其它相关文章！