SVG 元素重用

封面是个 SVG 的像素问号，手写的 XML。做第一版时，是逐行用 <rect />，但是那样子看起来很傻。于是就找出可以重用的部分重新做了一个。

因为 SVG 不支持 SVG 2 所以原文及引用的做了一些修改。

首先是分解，因为左右对称，同时上半部分是 3/4 个圆形。所以可以拆成三部分。因为左上（称为 a）向下延伸了一个像素，所以右上（称为 b）也跟着延伸下来。而右下（称为 c）则和右上重叠。另外再用两个 2x2 的方块放在剩下的位置上。

b 是 a 的镜像，c 是 a 的旋转，就得到这么一个分解的结果：

SVG 如何重用一个元素？

<use />！简单粗暴

另外 MDN 提到，从 SVG 2 开始，xlink:href 被废弃而直接使用 href¹。

<rect id="a" />
<use href="#a" />

那，镜像呢？

<use /> 可以使用 x，y 来进行定位。也可以使用 transform 来进行移动。transform 属性的值同 CSS 类似，但是可以叠加使用。

所以 scale 的参数如果是 -1 的话，就起到了镜像的效果。但是请想象一下在画图 / Photoshop 等工具中缩放图像，如果固定左边，拖动右边，向左缩小再放大之后，图片相当于同时做了平移和镜像两个操作。所以需要用 translate 补回来。

其它

SVG 可以通过 <g> 标签实现多个元素的整体上色和变换，很贴心。