fill
fill
属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で,その要素を塗りつぶす色を意味します.もう 1 つはアニメーションに使われた場合で,そのアニメーションの最終状態を定義します.
呈示属性(presentation attribute)として全ての要素に適用可能ですが,実際に影響があるのは次の 11 の要素です: <altGlyph>
, <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
(en-US), <tref>
(en-US), and <tspan>
.
アニメーションとしては次の 5 つの要素で使われています: <animate>
, <animateColor>
, <animateMotion>
, <animateTransform>
, and <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>
altGlyph
警告: As of SVG2 <altGlyph>
is deprecated and shouldn't be used.
For <altGlyph>
, fill
is a presentation attribute that defines the color of the glyph.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
メモ: As a presentation attribute fill
can be used as a CSS property.
animate
For <animate>
, fill
defines the final state of the animation.
Value | freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) |
---|---|
Default value | remove |
Animatable | No |
animateColor
警告: As of SVG Animation 2 <animateColor>
is deprecated and shouldn't be used. Use <animate>
instead.
For <animateColor>
, fill
defines the final state of the animation.
Value | freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) |
---|---|
Default value | remove |
Animatable | No |
animateMotion
For <animateMotion>
, fill
defines the final state of the animation.
Value | freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) |
---|---|
Default value | remove |
Animatable | No |
animateTransform
For <animateTransform>
, fill
defines the final state of the animation.
Value | freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) |
---|---|
Default value | remove |
Animatable | No |
circle
ellipse
path
For <path>
, fill
is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the fill-rule (en-US)
attribute)
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
メモ: As a presentation attribute fill
can be used as a CSS property.
polygon
For <polygon>
, fill
is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the fill-rule (en-US)
attribute)
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
メモ: As a presentation attribute fill
can be used as a CSS property.
polyline
For <polyline>
, fill
is a presentation attribute that defines tthe color of the interior of the shape. (Interior is define by the fill-rule (en-US)
attribute)
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
メモ: As a presentation attribute fill
can be used as a CSS property.
rect
set
For <set>
, fill
defines the final state of the animation.
Value | freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) |
---|---|
Default value | remove |
Animatable | No |
text
textPath
For <textPath>
(en-US), fill
is a presentation attribute that defines the color of the text.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
メモ: As a presentation attribute fill
can be used as a CSS property.
tref
警告: As of SVG2 <tref>
(en-US) is deprecated and shouldn't be used.
For <tref>
(en-US), fill
is a presentation attribute that defines the color of the text.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
メモ: As a presentation attribute fill
can be used as a CSS property.
tspan
Specifications
Specification |
---|
SVG Animations Level 2 # FillAttribute |
Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |
Browser compatibility
BCD tables only load in the browser
メモ: For information on using the context-fill
(and context-stroke
) values from HTML documents, see the documentation for the non-standard -moz-context-properties
property.