symbol

<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>

产品规格

SpecificationStatusComment
Scalable Vector Graphics (SVG) 2The definition of '<symbol>' in that specification.Candidate RecommendationAllowed geometry properties to be specified on a symbol
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<symbol>' in that specification.RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0(Yes)1.5 (1.8)9.09.03.0.4

FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support3.0(Yes)1.0 (1.8)No support(Yes)3.0.4