svg

2022-07-06  本文已影响0人  冰点雨

svg双闭合标签,默认宽高300*150 必须在svg标签内绘制图形

画线 line

<!--x1,y1:第一个点的坐标   x2,y2:第二个点的坐标 -->
        <line x1="100" y1="100" x2="180" y2="200" stroke="red"></line>

绘制折线 polyline

<!-- 绘制折线 可以多个点,多个点用逗号隔开 -->
        <polyline points="100 200,200 100,100 40,40 70" fill-opacity="0" stroke="blue"></polyline>

绘制矩形 rect

 <!-- 绘制矩形  fill:设置填充颜色  fill-opacity:设置填充颜色透明度  stroke:线的颜色-->
        <rect x="100" y="100" width="180" height="100" fill="pink"></rect>

绘制圆形 circle

<!--
            绘制圆形
            cx cy:圆心坐标
            r:半径
         -->
        <circle cx="400" cy="100" r="50" style="stroke: cyan;fill:none"></circle>

绘制圆形|椭圆形 ellipse

<!--
            绘制圆形|椭圆形
            cx cy:圆心坐标
            rx:水平半径
            ry:垂直半径
         -->
        <ellipse cx="400" cy="200" rx="80" ry="40" style="stroke: cyan;fill:none"></ellipse>

多边形 polygon

<polygon points="600 100,300 400,750 100" fill-opacity="0" stroke="red"></polygon>

绘制任意图形 path

        <path fill-opacity="0" stroke="blue" d="
        M 10 10
        L 20 400
        L 30 120
        L 40 66
        L 58 99
        L 60 120
        L 78 99
        Z
        ">
        </path>
上一篇 下一篇

猜你喜欢

热点阅读