fill
====

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

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

* `<circle>`
* `<ellipse>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>` (en-US)
* `<tref>` (en-US)
* `<tspan>`

アニメーションとしては次の要素で使われています: `<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 (en-US)` 属性によって定義されます*)

|  |  |
| --- | --- |
| 値 | **<paint>** |
| 既定値 | `black` |
| アニメーション | Yes |

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

polygon
-------

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

|  |  |
| --- | --- |
| 値 | **<paint>** |
| 既定値 | `black` |
| アニメーション | Yes |

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

polyline
--------

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

|  |  |
| --- | --- |
| 値 | **<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 with JavaScript enabled. Enable JavaScript to view data.