SVG参考手册
分类 | Elements
symbol
该<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> |
属性
全局属性
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
class
style
externalResourcesRequired
具体属性
preserveAspectRatio
viewBox
DOM接口
这个元素实现了SVGSymbolElement接口。
例子
<svg width="120" height="140">
<!-- 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 href="#sym01"
x="0" y="0" width="100" height="50"/>
<use href="#sym01"
x="0" y="50" width="75" height="38"/>
<use href="#sym01"
x="0" y="100" width="50" height="25"/>
</svg>
产品规格
Specification |
Status |
Comment |
|---|---|---|
Scalable Vector Graphics (SVG) 2The definition of '<symbol>' in that specification. |
Candidate Recommendation |
Allowed geometry properties to be specified on a symbol |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<symbol>' in that specification. |
Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.5 (1.8) |
9.0 |
9.0 |
3.0.4 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
Basic support |
3.0 |
(Yes) |
1.0 (1.8) |
No support |
(Yes) |
3.0.4 |
加载中,请稍侯......