可以用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=''调节边框颜色