symbol
元素用来定义一个图形模板对象,它可以用一个<use>
元素实例化。symbol
元素对图形的作用是在同一文档中多次使用,添加结构和语义。结构丰富的文档可以更生动地呈现出来,类似讲演稿或盲文,从而提升了可访问性。注意,一个symbol
元素本身是不呈现的。只有symbol
元素的实例(亦即,一个引用了symbol
的 <use>
元素)才能呈现。
用法
类别 | 容器元素, 结构元素 |
---|---|
允许的内容物 | 任意数量、任意排序的下列元素: 动画元素 描述性元素 形状元素 结构化元素 渐变元素 <a> , <altGlyphDef> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
示例
<svg> <!-- symbol definition NEVER draw --> <symbol id="sym01" viewBox="0 0 150 110"> <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/> <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/> </symbol> <!-- actual drawing by "use" element --> <use xlink:href="#sym01" x="0" y="0" width="100" height="50"/> <use xlink:href="#sym01" x="0" y="50" width="75" height="38"/> <use xlink:href="#sym01" x="0" y="100" width="50" height="25"/> </svg>
属性
全局属性
专有属性
DOM 接口
该元素实现了SVGSymbolElement
接口。
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8) | 9.0 | 9.0 | 3.0.4 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 | 1.0 (1.8) | 未实现 | (Yes) | 3.0.4 |
该表格基于这些资源。