SVG 的 path 属性绘制图形
原创
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。
SVG 代码都包裹在一个 svg 标签里面，可以通过 circle（圆）、rect（方块）等标签绘制图形，同时可以通过 path 属性自定义想要的图形。
1. svg 的 path 路径
下面代码 d 里面是画图的步骤，M标识平移（move），L表示话直线（line），Z表示闭合，当前代码可以看作从 （18,3）开始 → ↓ → ↙ ↖ → 闭合，得到的图形如下。
<path
id="row"
d=" M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z"
></path>
svg
2.svg 的 use 标签
use 标签可以通过 id 来复用一个 svg，这在封装 svg 时很常用
<svg class="svg">
<path
id="row"
d=" M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z"
></path>
<use href="#row" x="100" fill="#ffffff" stroke="green"></use>
<!-- 复制、白色填充、绿边 -->
</svg>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录