SVG 的 path 属性绘制图形

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。

SVG 代码都包裹在一个 svg 标签里面，可以通过 circle（圆）、rect（方块）等标签绘制图形，同时可以通过 path 属性自定义想要的图形。

1. svg 的 path 路径

下面代码 d 里面是画图的步骤，M标识平移（move），L表示话直线（line），Z表示闭合，当前代码可以看作从 （18,3）开始 → ↓ → ↙ ↖ → 闭合，得到的图形如下。

代码语言：javascript复制

<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 时很常用

代码语言：javascript复制

<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>

svg

0 人点赞