svg图形与动画（0718）

svg图形与动画（0718）

可以用svg制作多种图形

首先是矩形（可通过rx ry调节圆角）

  <svg width="500" height="500">

         <!-- x:水平坐标轴

                 y:垂直坐标轴

                 rx:矩形圆角是以r为半径画的圆 -->

            <rect x="30" y="30" width="200" height="200" fill="none" stroke="green"

            stroke-width="5" rx="50" ry="50"></rect>

 </svg>

运行效果:

 圆（可通过fill="red" fill-opacity="0.3" 分别更改填充颜色和填充颜色的透明度）

 <svg width="500" height="500">   

<!-- 绘制圆形:使用circle，还可以使用rect标签结合圆角的值实现圆形或椭圆的绘制 -->

            <!--

             cx：圆形的中心点x轴坐标

             cy：圆形的中心点y轴坐标

             r：圆形的半径

             fill=""设置填充颜色

             stroke-opacity:设置线条透明度

             fill-opacity=""设置填充的透明度 -->

            <circle cx="300" cy="300" r="100" fill="red" fill-opacity="0.3"></circle>

</svg>

运行效果:

直线：

<!-- 绘制直线 line标签 -->

<svg width="500" height="500">

stroke=''调节边框颜色