SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。
SVG 代码都包裹在一个 svg 标签里面,可以通过 circle(圆)、rect(方块)等标签绘制图形,同时可以通过 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>
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 删除。