fill
fill 属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で，その要素を塗りつぶす色（またはグラデーションやパターンなどの SVG ペイントサーバー）を意味します．もう 1 つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します．
メモ:
プレゼンテーション属性であるため、 fill には対応する CSS プロパティ fill があります。両方が指定された場合、 CSS プロパティが優先されます。
SVG のプレゼンテーション属性の fill と CSS の fill プロパティは、次の SVG 要素で使用できます。
SVG の fill 属性は、以下の SVG 要素でアニメーションの最後の状態を定義するために使用することができます。
例
基本色とグラデーションの塗り潰し、およびアニメーション
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- 基本色の塗り潰し -->
<circle cx="50" cy="50" r="40" fill="pink" />
<!-- 円をグラデーションで塗り潰し -->
<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)" />
<!--
アニメーションの円の最終状態を維持します。これは半径 40 の円です。
-->
<circle cx="250" cy="50" r="20">
<animate
attributeType="XML"
attributeName="r"
from="0"
to="40"
dur="5s"
fill="freeze" />
</circle>
</svg>
context-fill の例
この例では、 <path> 要素を使用して 3 つの図形を定義し、それぞれに異なる stroke と fill の色を設定しています。また、 <circle> 要素を <marker> 要素を介してマーカーとして定義しています。各図形には、CSS の marker プロパティを介してマーカーが適用されています。
<circle> には、 stroke="context-stroke" および fill="context-fill" が設定されています。これは図形のコンテキスト内でマーカーとして設定されているため、これらの属性により、それぞれの場合で <path> 要素に設定された fill および stroke が継承されます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
<style>
path {
stroke-width: 2px;
marker: url(#circle);
}
</style>
<path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
stroke="red" fill="orange" />
<path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
stroke="green" fill="lightgreen" />
<path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
stroke="blue" fill="lightblue" />
<marker id="circle" markerWidth="12" markerHeight="12"
refX="6" refY="6" markerUnits="userSpaceOnUse">
<circle cx="6" cy="6" r="3" stroke-width="2"
stroke="context-stroke" fill="context-fill" />
</marker>
</svg>
出力結果は次のようになります。
メモ:
要素は、 context-stroke と context-fill を使用して、 <use> 要素によって参照された際に stroke と fill の値を継承することもできます。
animate
<animate> において、 fill はアニメーションの最終状態を定義します。
| 値 |
freeze (最後のアニメーションフレームの状態を維持) | remove (最初のアニメーションフレームの状態を維持)
|
|---|---|
| 既定値 | remove |
| アニメーション | 不可 |
animateMotion
<animateMotion> において、 fill はアニメーションの最終状態を定義します。
| 値 |
freeze (最後のアニメーションフレームの状態を維持) | remove (最初のアニメーションフレームの状態を維持)
|
|---|---|
| 既定値 | remove |
| アニメーション | 不可 |
animateTransform
<animateTransform> において、 fill はアニメーションの最終状態を定義します。
| 値 |
freeze (最後のアニメーションフレームの状態を維持) | remove (最初のアニメーションフレームの状態を維持)
|
|---|---|
| 既定値 | remove |
| アニメーション | 不可 |
circle
ellipse
path
polygon
polyline
<polyline> において、 fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部は fill-rule 属性によって定義されます)
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
rect
set
<set> において、 fill はアニメーションの最終状態を定義します。
| 値 |
freeze (最後のアニメーションフレームの状態を維持) | remove (最初のアニメーションフレームの状態を維持)
|
|---|---|
| 既定値 | remove |
| アニメーション | No |
text
textPath
<textPath> において、 fill はテキストの色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
tref
tspan
仕様書
| Specification |
|---|
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |
ブラウザーの互換性
svg.elements.animate.fill
svg.elements.animateMotion.fill
svg.elements.animateTransform.fill
svg.elements.circle.fill
svg.elements.ellipse.fill
svg.elements.path.fill
svg.elements.polygon.fill
svg.elements.polyline.fill
svg.elements.rect.fill
svg.elements.set.fill
svg.elements.text.fill
svg.elements.textPath.fill
svg.elements.tspan.fill
関連情報
- CSS の
fillプロパティ