SVG 元素重用

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

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

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

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

将问号分解成小区域
将问号分解成小区域

SVG 如何重用一个元素?

<use />!简单粗暴

The element takes nodes from within the SVG document, and duplicates them somewhere else.

<svg> - SVG

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

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

那,镜像呢?

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

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

其它

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


  1. Safari 当前不支持 <use /> 的 href 属性,所以仍然需要 xlink:href。而后者则需要增加 xmlns:xlink="http://www.w3.org/1999/xlink",不然会得到“Namespace prefix xlink for href on use is not defined”的错误。 [return]