color

Baseline 広く利用可能

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

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

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

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

使用上のメモ

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

例

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

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>