このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

id

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月⁩.

id 属性は要素に固有の名前を割り当てます。

すべての要素でこの属性を使用することができます。

html
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">
  <style>
    <![CDATA[
      #smallRect {
        stroke: #000066;
        fill: #00cc00;
      }
    ]]>
  </style>

  <rect id="smallRect" x="10" y="10" width="100" height="100" />
</svg>

使用上の注意

<id>
既定値 なし
アニメーション 不可
<id>

要素の ID を指定します。 ID はノードツリー内で固有でなければならず、空文字列であってはならず、ホワイトスペース文字を含んではなりません。

メモ: URL の対象フラグメントとして使用されるときに id の値に SVG view 仕様書として解釈される値 (例えば MyDrawing.svg#svgView(viewBox(0,200,1000,1000))) や、基本メディアフラグメントを使用しないでください。

XML 文書内で妥当でなければなりません。独立した SVG 文書は XML 1.0 の構文を使用しており、有効な ID は指定された文字 (文字、数字、いくつかの句読点) のみを含み、数字、フルストップ (.) 文字、ハイフンマイナス (-) 文字で始まらないことを指定しています。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# Core.attrib

ブラウザーの互換性

関連情報