fill

fill 属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で,その要素を塗りつぶす色 (またはグラデーションやパターンなどの SVG ペイント サーバー) を意味します.もう 1 つはアニメーションに使われた場合で,そのアニメーションの最終状態を定義します.

この属性は次の SVG 要素で使用できます。

アニメーションとしては次の要素で使われています: <animate>, <animateMotion>, <animateTransform>, <set>.

html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <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)" />

  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate
      attributeType="XML"
      attributeName="r"
      from="0"
      to="40"
      dur="5s"
      fill="freeze" />
  </circle>
</svg>

animate

<animate> は、fill はアニメーションの最終状態を定義します。

freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
既定値 remove
アニメーション No

animateMotion

<animateMotion> は、fill はアニメーションの最終状態を定義します。

freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
既定値 remove
アニメーション No

animateTransform

<animateTransform> は、fill はアニメーションの最終状態を定義します。

freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
既定値 remove
アニメーション No

circle

<circle> は、fill は円の色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

ellipse

<ellipse> は、fill は楕円の色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

path

<path> は、fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule 属性によって定義されます)

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

polygon

<polygon> は、fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule 属性によって定義されます)

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

polyline

<polyline> は、fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule 属性によって定義されます)

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

rect

<rect> は、fill は四角形の色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

set

<set> は、fill はアニメーションの最終状態を定義します。

freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
既定値 remove
アニメーション No

text

<text> は、fill はテキストの色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

textPath

<textPath> は、fill はテキストの色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

tref

警告: As of SVG2 <tref> is deprecated and shouldn't be used.

<tref> は、fill はテキストの色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

tspan

<tspan> は、fill はテキストの色を定義するプレゼンテーション属性です。

<paint>
既定値 black
アニメーション Yes

メモ: プレゼンテーション属性として fill を CSS プロパティとして使用できます。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

ブラウザーの互換性

svg.elements.circle.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.ellipse.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.path.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.polygon.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.polyline.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.rect.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.text.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.textPath.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support

svg.elements.tref.fill

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
fill
Deprecated
context-fill value
Deprecated

Legend

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

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.

svg.elements.tspan.fill

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
fill
context-fill value

Legend

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

Full support
Full support
No support
No support