color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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>

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# ColorProperty

ブラウザーの互換性

BCD tables only load in the browser