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 属性は、間接的な値の候補である currentcolorfill, 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
CSS Color Module Level 4
# the-color-property
Scalable Vector Graphics (SVG) 2
# ColorProperty

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support