stop-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.

stop-color 属性は、グラデーションの色経由点で使用する色を示します。

メモ: グラデーションに関して、SVG は transparent キーワードを CSS とは異なる方法で扱います。SVG はグラデーションを事前に乗算された空間で計算しないので、 transparent は実際には透明な黒を意味します。そのため、 stop-colortransparent という値を指定することは、 stop-colorblack という値を指定し、 stop-opacity0 という値を指定することと同じです。

メモ: プレゼンテーション属性である stop-color は、CSS プロパティとして使用することができます。

この属性は以下の SVG 要素で使用することができます。

使用上のメモ

currentcolor | <color> <icccolor>
既定値 black
アニメーション
currentcolor

このキーワードは、現在の塗りつぶしの色を表し、 <paint> の指定の中で、 fill および stroke 属性と同じ方法で指定することができます。

<color>

この値は色の値を示します。

<icccolor>

この値は ICC カラープロファイルを参照します。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# StopColorProperty

ブラウザーの互換性

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
stop-color

Legend

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

Full support
Full support

関連情報