html技术: 用svg标签画图

如同canvas一样,svg标签是个画布(容器),用来放图

1
2
3
4
<!--	必须初始化宽高,要不然看不见了	  -->
<svg width="600px" height="400px">
<!-- 放画的图 -->
</svg>

输出直线:<line />

html svg画图

效果:
html svg画图

输出折线:<polyline />

html svg画图html svg画图

输出文本:<text />

html svg画图

html svg画图

输出矩形:<rect />

html svg画图

html svg画图

输出多边形:<polygon />

html svg画图

html svg画图

输出正圆:<circle />

html svg画图

html svg画图

输出椭圆:<ellipse />

html svg画图

html svg画图

path标签画线:<path />

html svg画图

html svg画图

参数除了除了 M L 还有 H V Z A(也区分大小写)
如 v h:
html svg画图
html svg画图
path 不止可以画直线,还可以画 ==弧线==:

html svg画图


html技术: 用svg标签画图
https://github.com/chergn/chergn.github.io/ecb77277e3c7/
作者
全易
发布于
2024年3月28日
许可协议