马黑黑老师 SVG：使用symbol封装现成路径

醉美水芙蓉

很多时候现成的路径并不能完美适配当前的工作场景，这种情形我们需要对路径做一些必要的处理。更改路径 d 属性数据无异于重新设计路径，对之进行简单封装更经济划算。symbol 可以拥有自己的 viewBox，非常合适用于此类需求的路径封装。

假设我们有如下包含 path 路径的 svg 代码：

<svg id="msvg" width="24" height="24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="darkred"></path>
</svg>

从中我们得知 path 路径建立于宽高为 24*24 的画布。现在，我们想将路径应用于其它尺寸的工作场景，例如 400*400 外加 viewBox 设置为 -200 -200 400 400 的 SVG 画布。以下是实现代码：

<svg width="400" height="400" viewBox="-200 -200 400 400">
    <symbol id="sb1" viewBox="0 0 24 24">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="pink"></path>
    </symbol>
    <use href="#sb1" x="-200" y="-200" width="400" height="400"></use>
</svg>

上述实现代码的核心在于：在新的工作场景，先将路径原始的绘制范围设置为 symbol 的 viewBox 属性值，然后将原始路径置入 symbol 中，最后使用 use 实例化 symbol 图案。各主要步骤描述如下：

其一：原始画布工作区域转 symbol viewBox 属性

通常，路径设计的时候都基于某一个尺寸以及视口进行，自己设计的心中有数，别人设计的需要分析一下。如果 path 路径没有额外封装，那么，凡带有 svg 标签的 path 路径，先检查 svg 标签有没有 viewBox 属性，若有，viewBox 属性就是路径的绘制视口，若没有，路径的绘制区域就是 svg 的宽高；如果 path 路径额外封装于其它标签，则观察路径直接父元素是什么，是 symbol 就将整个 symbol+path 一同移植，是别的就遵循 svg 的绘制视口或宽高尺寸去构造新场景 symbol 的 viewBox 属性。

有时候仅拿到了 path 路径的 d 属性值，这时候就需要更强大的分析能力，依据路径数据分析其绘制范围，并通过简单尝试校准路径的原始绘制视口。

其二：使用 use 标签实例化 symbol 图案

symbol 内部包裹的路径不会自动渲染，需要使用 use 标签将其实例化后才能将图案呈现于 svg 画布中。use 标签通过 href 属性指明实例化哪一个 symbol，同时拥有一些常用属性。下面列举几个经常用到的 use 标签的属性：

href : 实例化对象 【例】href="#sb1"
x : 图案渲染的 x 坐标 【例】x ="-200"
y ：图案渲染的 y 坐标 【例】y="-200"
width : 图案的宽度 【例】width="400"
height ：图案的高度 【例】height="400"

其中的 width 和 height 需要一个前提，即 href 所引用的对象具有 viewBox 属性设置，否则 use 的宽高设置无效（此时 use 渲染的实例效果为 symbol 或其他对象的实际内部尺寸）。

最后看一下前边路径例子的渲染效果：

（一）原始心形图案：

（二）封装后的心形图案：

klxf

很实用，谢谢醉美管理员精彩分享