<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 インターフェイスを実装しています。

例

html,
body,
svg {
  height: 100%;
}

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

仕様書

ブラウザーの互換性