<symbol>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<symbol> は SVG 要素で、<use> 要素によってインスタンス化することができるグラフィカルなテンプレートオブジェクトを定義する際に使用されます。
<symbol> 要素を同じ文書内で複数回使用されるグラフィックに用いることで、構造と意味づけが追加されます。構造が豊かな文書は、グラフィック、音声、点字として表示される可能性があり、これによりアクセシビリティが向上します。
使用コンテキスト
属性
height-
この属性は、シンボルの高さを決定します。 値の型: <length> | <percentage>; 既定値:
auto; アニメーション: 可 preserveAspectRatio-
この属性は、 SVG 断片が異なるアスペクト比を持つコンテナーに埋め込まれた場合、どのように変形されるかを定義する。 値の型: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; 既定値:xMidYMid meet; アニメーション: 可 refX-
この属性は、シンボルの参照点の x 座標を決定します。 値の型: <length> | <percentage> |
left|center|right; 既定値: None; アニメーション: 可 refY-
この属性は、シンボルの参照点の y 座標を決定します。 値の型: <length> | <percentage> |
top|center|bottom; 既定値: None; アニメーション: 可 viewBox-
この属性は、現在のシンボルに対する SVG ビューポートの境界を定義します。 値の型: <list-of-numbers>; 既定値: none; アニメーション: 可
width-
この属性は、シンボルの幅を決定します。 値の型: <length> | <percentage>; 既定値:
auto; アニメーション: 可 x-
この属性は、シンボルの x 座標を決定します。 値の型: <length> | <percentage>; 既定値:
0; アニメーション: 可 y-
この属性は、シンボルの y 座標を決定します。 値の型: <length> | <percentage>; 既定値:
0; アニメーション: 可
DOM インターフェイス
この要素は SVGSymbolElement インターフェイスを実装しています。
例
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<!-- 独自の座標系の中で定義したシンボル -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- シンボルの位置を具体化するグリッド -->
<path
d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none"
stroke="pink" />
<!-- シンボルのすべてのインスタンス -->
<use href="#myDot" x="5" y="5" opacity="1.0" />
<use href="#myDot" x="20" y="5" opacity="0.8" />
<use href="#myDot" x="35" y="5" opacity="0.6" />
<use href="#myDot" x="50" y="5" opacity="0.4" />
<use href="#myDot" x="65" y="5" opacity="0.2" />
</svg>
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # SymbolElement |
ブラウザーの互換性
Loading…