脚本宝典收集整理的这篇文章主要介绍了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制作简单图形的实例介绍的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的SVG制作简单图形的实例介绍全部内容，希望文章能够帮你解决SVG制作简单图形的实例介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。