1. ウェブ
  2. SVG
  3. リファレンス
  4. 属性
  5. color

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

View in English Always switch to English

color

Baseline 広く利用可能

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

color 属性は、間接的な値の候補である currentColor を fill, stroke, stop-color, flood-color, lighting-color の各属性に与えるために使用します。

メモ: プレゼンテーション属性として、color は CSS プロパティとして使用できます。詳しい情報は CSS 色 を参照してください。

プレゼンテーション属性として、任意の要素に適用することができますが、上記のように SVG 要素には直接影響を与えません。

使用上のメモ

値 <color> | inherit
既定値 ユーザーエージェントによる
アニメーション 可

例

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g color="green">
    <rect width="50" height="50" fill="currentColor" />
    <circle
      r="25"
      cx="70"
      cy="70"
      stroke="currentColor"
      fill="none"
      stroke-width="5" />
  </g>
</svg>

仕様書

仕様書
CSS Color Module Level 4
# the-color-property
Scalable Vector Graphics (SVG) 2
# ColorProperty

ブラウザーの互換性

関連情報

  • CSS の color プロパティ

MDN の改良に協力

協力方法を知る

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

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