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 = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical ArcZ = closepathsvg>
        path     d="m250 150 L150 350 L350 350 Z" />
    /svg>
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！