SVG <defs>元素用于嵌入可在SVG映像内重用的定义。例如,您可以将SVG形状分组在一起,然后将其作为单个形状重复使用。
这是一个简单的<defs>元素示例:
<svg> <defs> <g> <rect x="100" y="100" width="100" height="100" /> <circle cx="100" cy="100" r="100" /> </g> </defs> </svg>测试看看‹/›
在<defs>元素中定义的形状不会显示在SVG图像中。在显示它们之前,它们必须被<use>元素引用。下面是一个实例:
<svg width="500" height="100"> <defs> <g id="shape"> <rect x="0" y="0" width="50" height="50" ></rect> <circle cx="0" cy="0" r="50" ></circle> </g> </defs> <use xlink:href="#shape" x="50" y="50" ></use> <use xlink:href="#shape" x="200" y="50" ></use> <circle cx="50"cy="50" r="5" style="fill:#0000ff;"></circle> <circle cx="200"cy="50" r="5" style="fill:#0000ff;"></circle> </svg>测试看看‹/›
在可以引用<g>元素之前,必须通过其id属性为其设置一个ID。 <use>元素通过其xlink:href属性引用<g>元素。 请注意属性值中ID前面的#。
<use>元素通过其x和y属性指定在何处显示重复使用的形状。 请注意,<g>元素内部的形状位于0,0。 这样做是因为它们的位置已添加到<use>元素中指定的位置。
运行后图像效果:
蓝点不在示例中。 添加它们是为了显示两个<use>元素的x和y。
您可以将以下元素放入<defs>元素:
任何形状元素(rect,line等)
g
symbol