fill
属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で,その要素を塗りつぶす色 (またはグラデーションやパターンなどの SVG ペイント サーバー ) を意味します.もう 1 つはアニメーションに使われた場合で,そのアニメーションの最終状態を定義します.
この属性は次の SVG 要素で使用できます。
アニメーションとしては次の要素で使われています: <animate>
, <animateMotion>
, <animateTransform>
, <set>
.
html,
body,
svg {
height: 100%;
}
< svg viewBox = " 0 0 300 100" xmlns = " http://www.w3.org/2000/svg" >
< circle cx = " 50" cy = " 50" r = " 40" fill = " pink" />
< defs>
< radialGradient id = " myGradient" >
< stop offset = " 0%" stop-color = " pink" />
< stop offset = " 100%" stop-color = " black" />
</ radialGradient>
</ defs>
< circle cx = " 150" cy = " 50" r = " 40" fill = " url(#myGradient)" />
< circle cx = " 250" cy = " 50" r = " 20" >
< animate
attributeType = " XML"
attributeName = " r"
from = " 0"
to = " 40"
dur = " 5s"
fill = " freeze" />
</ circle>
</ svg>
<animate>
は、fill
はアニメーションの最終状態を定義します。
値
freeze
(Keep the state of the last animation frame ) | remove
(Keep the state of the first animation frame )
既定値
remove
アニメーション
No
<animateMotion>
は、fill
はアニメーションの最終状態を定義します。
値
freeze
(Keep the state of the last animation frame ) | remove
(Keep the state of the first animation frame )
既定値
remove
アニメーション
No
<animateTransform>
は、fill
はアニメーションの最終状態を定義します。
値
freeze
(Keep the state of the last animation frame ) | remove
(Keep the state of the first animation frame )
既定値
remove
アニメーション
No
<circle>
は、fill
は円の色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<ellipse>
は、fill
は楕円の色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<path>
は、fill
は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule
属性によって定義されます )
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<polygon>
は、fill
は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule
属性によって定義されます )
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<polyline>
は、fill
は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule
属性によって定義されます )
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<rect>
は、fill
は四角形の色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<set>
は、fill
はアニメーションの最終状態を定義します。
値
freeze
(Keep the state of the last animation frame ) | remove
(Keep the state of the first animation frame )
既定値
remove
アニメーション
No
<text>
は、fill
はテキストの色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<textPath>
は、fill
はテキストの色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
警告:
As of SVG2 <tref>
is deprecated and shouldn't be used.
<tref>
は、fill
はテキストの色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
<tspan>
は、fill
はテキストの色を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性として fill
を CSS プロパティとして使用できます。
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – No support Chrome Android No
Toggle history Firefox for Android – No support Firefox for Android No
Toggle history Opera Android – No support Opera Android No
Toggle history Safari on iOS – No support Safari on iOS 2 – 16.3
Toggle history Samsung Internet – No support Samsung Internet No
Toggle history WebView Android – No support WebView Android No
Toggle history WebView on iOS – No support WebView on iOS 2 – 16.3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – No support Chrome Android No
Toggle history Firefox for Android – No support Firefox for Android No
Toggle history Opera Android – No support Opera Android No
Toggle history Safari on iOS – No support Safari on iOS 2 – 16.3
Toggle history Samsung Internet – No support Samsung Internet No
Toggle history WebView Android – No support WebView Android No
Toggle history WebView on iOS – No support WebView on iOS 2 – 16.3
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Deprecated. Not for use in new websites. Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.