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> (en-US) は、fill はテキストの色を定義するプレゼンテーション属性です。

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

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

tref

警告: As of SVG2 <tref> (en-US) is deprecated and shouldn't be used.

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

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

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

tspan

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

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

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

仕様書

Specification
SVG Animations Level 2
# FillAttribute
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

ブラウザーの互換性

BCD tables only load in the browser