fill

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

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

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

例

html,
body,
svg {
  height: 100%;
}

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 プロパティとして使用できます。