fill
The fill
attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns ) used to paint the element; for animation it defines the final state of the animation.
You can use this attribute with the following SVG elements:
For animation, these elements are using this attribute: <animate>
, <animateMotion>
, <animateTransform>
, and <set>
.
Example
< 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)" />
< 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>
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
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
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
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
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
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 the color of the interior of the shape. (Interior is define by the fill-rule
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>
, 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>
is deprecated and shouldn't be used.
For <tref>
, 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
Browser compatibility
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet
fill
No
No
3
No
No
No
No
No
4
No
No
No
context-fill
No
No
111
No
No
No
No
No
111
No
No
No