このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
fill
fill 属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で，その要素を塗りつぶす色（またはグラデーションやパターンなどの SVG ペイントサーバー）を意味します．もう 1 つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します．
メモ:プレゼンテーション属性であるため、fill には対応する CSS プロパティfill があります。両方が指定された場合、 CSS プロパティが優先されます。
SVG のプレゼンテーション属性のfill と CSS のfill プロパティは、次の SVG 要素で使用できます。
SVG のfill 属性は、以下の SVG 要素でアニメーションの最後の状態を定義するために使用することができます。
例
基本色とグラデーションの塗り潰し、およびアニメーション
html,body,svg { height: 100%;}<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- 基本色の塗り潰し --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- 円をグラデーションで塗り潰し --> <defs> <radialGradient> <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 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
<circle> において、fill は円の色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
ellipse
<ellipse> において、fill は楕円の色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
path
<path> において、fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部はfill-rule 属性によって定義されます)
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
polygon
<polygon> において、fill は図形の内部の色を定義するプレゼンテーション属性です。（内部はfill-rule 属性によって定義されます）
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
polyline
<polyline> において、fill は図形の内部の色を定義するプレゼンテーション属性です。 (内部はfill-rule 属性によって定義されます)
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
rect
<rect> において、fill は四角形の色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
set
<set> において、fill はアニメーションの最終状態を定義します。
| 値 | freeze (最後のアニメーションフレームの状態を維持) |remove (最初のアニメーションフレームの状態を維持) |
|---|---|
| 既定値 | remove |
| アニメーション | No |
text
<text> において、fill はテキストの色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
textPath
<textPath> において、fill はテキストの色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
tspan
<tspan> において、fill はテキストの色を定義するプレゼンテーション属性です。
| 値 | <paint> |
|---|---|
| 既定値 | black |
| アニメーション | 可 |
仕様書
| 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プロパティ