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.
The SVG presentational fill
attribute and the CSS fill
property can be used with the following SVG elements:
The SVG fill
attribute can be used to define the final animation state with the following SVG elements:
Examples
Basic color and gradient fills, and animation
<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>
context-fill
example
In this example, we define three shapes using <path>
elements, each with a different stroke
and fill
color set on them. We also define a <circle>
element as a marker via the <marker>
element. Each shape has the marker applied via the marker
CSS property.
The <circle>
has stroke="context-stroke"
and fill="context-fill"
set on it. Because it is being set as a marker in the context of the shapes, these attributes cause it to inherit the fill
and stroke
set on the <path>
element in each case.
<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>
The output is as follows:
Note: Elements can also use context-stroke
and context-fill
to inherit stroke
and fill
values when they are referenced by <use>
elements.
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 |
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
polygon
polyline
For <polyline>
, fill
is a presentation attribute that defines the color of the interior of the shape. (The interior is defined by the fill-rule
attribute or fill-rule
property.)
Value | <paint> |
---|---|
Default value | black |
Animatable | Yes |
Note: 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>
, 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
tspan
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |
Browser compatibility
svg.elements.circle.fill
BCD tables only load in the browser
svg.elements.ellipse.fill
BCD tables only load in the browser
svg.elements.path.fill
BCD tables only load in the browser
svg.elements.polygon.fill
BCD tables only load in the browser
svg.elements.polyline.fill
BCD tables only load in the browser
svg.elements.rect.fill
BCD tables only load in the browser
svg.elements.text.fill
BCD tables only load in the browser
svg.elements.textPath.fill
BCD tables only load in the browser
svg.elements.tref.fill
BCD tables only load in the browser
svg.elements.tspan.fill
BCD tables only load in the browser