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
ellipse
path
polygon
polyline
<polyline> は、fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule 属性によって定義されます)
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | Yes |
メモ:
プレゼンテーション属性として fill を CSS プロパティとして使用できます。
rect
set
<set> は、fill はアニメーションの最終状態を定義します。
| 値 |
freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
|
|---|---|
| 既定値 | remove |
| アニメーション | No |
text
textPath
<textPath> は、fill はテキストの色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | Yes |
メモ:
プレゼンテーション属性として fill を CSS プロパティとして使用できます。
tref
tspan
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |