class

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

要素にクラス名またはクラス名群を割り当てます。同じクラス名をいくつもの要素に割り当てることはありますが、複数のクラス名を指定する場合は、それらをホワイトスペースで区切る必要があります。

要素のクラス名には、2 つの重要な役割があります。

スタイルシートセレクターとして、作成者が一連の要素にスタイル情報を代入する場合。
ブラウザーで一般的な用途で使用されます。

このクラスを使用して、SVG コンテンツに CSS を使ってスタイル設定できます。

使用コンテキスト

カテゴリー	なし
値	<list-of-class-names>
アニメーション	可

例

html

<html lang="ja">
  <body>
    <svg
      width="120"
      height="220"
      viewPort="0 0 120 120"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg">
      <style>
        <![CDATA[
          rect.rectClass {
            stroke: #000066;
            fill: #00cc00;
          }
          circle.circleClass {
            stroke: #006600;
            fill: #cc0000;
          }
        ]]>
      </style>

      <rect class="rectClass" x="10" y="10" width="100" height="100" />
      <circle class="circleClass" cx="40" cy="50" r="26" />
    </svg>
  </body>
</html>

要素

以下の要素で、class 属性を使用することができます。

仕様書

仕様書
Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年7月31日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告