« SVG Attribute reference home
The fill
attribute has two meanings based on the context it's used.
By default, when animation elements end their effects are no longer applied to the presentation value for the target attributes. The fill
attribute can be used to maintain the value of an animation after the active duration of an animation element ends.
For shapes and text, the fill
attribute is a presentation attribute that define the color of the interior of the given graphical element. What is called the "interior" depends on the shape itself and the value of the fill-rule
attribute. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
Usage context
For animation elements
Categories | Animation timing attribute |
---|---|
Value | remove | freeze |
Animatable | No |
Normative document | SVG 1.1 (2nd Edition) |
- remove (default)
- The animation effect is removed (no longer applied) when the active duration of the animation is over. After the active end of the animation, the animation no longer affects the target (unless the animation is restarted).
- freeze
- The animation effect is "frozen" when the active duration of the animation is over for the remainder of the document duration (or until the animation is restarted).
For shapes and text
Categories | Presentation attribute |
---|---|
Value |
<paint>, |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
Examples
Example 1: Simple SVG
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" fill="#666"/> </svg>
Result
Using context-fill
For information on using the non-standard and restricted context-fill
(and context-stroke
) value see the documentation for the -moz-context-properties
property.
See also
The following elements can use the fill
attribute