svg : symbol 标签

马黑黑 · 发表于 2023-11-15 07:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

symbol的原意指象征、标记、符号等，在svg里，symbol标签定义图像模板对象，由use标签将其实例化。实例化symbol定义的图像模板，通过use标签的 xlink:href="#id" 或 href="#id" 实现，前者针对老旧浏览器，后者现代浏览器除Safri外都完美支持，为了兼容，建议使用前者或两个都用。symbol的id标识必须设置，否则无从实例化。symbol可以拥有自己的 viewBox 视口设置，若设置，则其内的实体图像位置与尺寸的安排应与之配套。

use标签在实例化symbol图像模板时，可以设定XY坐标对图像进行定位，还可以设置自己的实例尺寸。以下代码，我们用symbol定义了一组图像模板，内有一个polygon菱形、一个circle小圆点，symbol有自己的id和viewBox；然后，使用三个use标签实例化 id="sym" 的symbol，xy属性值一样，宽高各不相同：

<svg width="200" height="200" style="border: 1px solid gray;">
	<symbol id="sym" viewBox="0 0 110 110">
		<polygon points="100 50, 50 100, 0 50, 50 0" fill="none" stroke="red" />
		<circle cx="50" cy="50" r="5" fill="green" />
	</symbol>

	<use xlink:href="#sym" x="10" y="10" width="200" height="200" />
	<use xlink:href="#sym" x="10" y="10" width="100" height="100" />
	<use xlink:href="#sym" x="10" y="10" width="50" height="50" />
</svg>

defs是个单身汉，它自身一无所有，但是，symbol和defs不一样，symbol有名分还有视口属性，经由自身的id而非子元素的id被实例化。二者也有相同的地方，就是，若不被实例化，它们定义的图像都不会呈现也不占位。