fill
fill
属性には使われ方により2つの意味があります. 1つは図形やテキストに使われた場合で,その要素を塗りつぶす色を意味します.もう1つはアニメーションに使われた場合で,そのアニメーションの最終状態を定義します.
呈示属性(presentation attribute)として全ての要素に適用可能ですが,実際に影響があるのは次の11の要素です: <altGlyph> (en-US), <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath> (en-US), <tref> (en-US), and <tspan>
.
アニメーションとしては次の5つの要素で使われています: <animate>
, <animateColor>
, <animateMotion>
, <animateTransform>
, and <set>
.
<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
Warning: As of SVG2 <altGlyph> (en-US) is deprecated and shouldn't be used.
For <altGlyph> (en-US), fill
is a presentation attribute that defines the color of the glyph.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: 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
Warning: 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
For <circle>
, fill
is a presentation attribute that defines the color of the circle.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: As a presentation attribute fill
can be used as a CSS property.
ellipse
For <ellipse>
, fill
is a presentation attribute that defines the color of the ellipse.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: As a presentation attribute fill
can be used as a CSS property.
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 |
Note: 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 |
Note: 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 |
Note: As a presentation attribute fill
can be used as a CSS property.
rect
For <rect>
, fill
is a presentation attribute that defines the color of the rectangle.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: As a presentation attribute fill
can be used as a CSS property.
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
For <text>
, fill
is a presentation attribute that defines what the color of the text.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: As a presentation attribute fill
can be used as a CSS property.
textPath
For <textPath> (en-US), fill
is a presentation attribute that defines the color of the text.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: As a presentation attribute fill
can be used as a CSS property.
tref
Warning: 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 |
Note: As a presentation attribute fill
can be used as a CSS property.
tspan
For <tspan>
, fill
is a presentation attribute that defines the color of the text.
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: As a presentation attribute fill
can be used as a CSS property.
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 transform の定義 |
編集者草案 | Definition for animations |
Scalable Vector Graphics (SVG) 2 fill の定義 |
勧告候補 | Definition for shapes and texts. Adds context-fill and context-stroke . |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) fill の定義 |
勧告 | Initial definition for animations |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) fill の定義 |
勧告 | Initial definition for shapes and texts |
Browser compatibility
BCD tables only load in the browser
Note: 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.