fill

  • Revision slug: SVG/Attribute/fill
  • Revision title: fill
  • Revision id: 91581
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 244 words added

Revision Content

« SVG Attribute reference home

The fill attribute as two meaning based on the context it's used.

For animation elements, by default when they ends, 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" depend on the shape itself and the value of the {{ SVGAttr("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
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). This is the default value.
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)

Example

Elements

The following elements can use the fill attribute

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>fill</code> attribute as two meaning based on the context it's used.</p>
<p>For animation elements, by default when they ends, 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.</p>
<p>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" depend on the shape itself and the value of the {{ SVGAttr("fill-rule") }} attribute. As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet</p>
<h2>Usage context</h2>
<h3>For animation elements</h3>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Animation timing attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong title="this is the default value">remove</strong> | freeze</td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>remove</dt> <dd>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). This is the default value.</dd> <dt>freeze</dt> <dd>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).</dd>
</dl>
<h3>For shapes and text</h3>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint">&lt;paint&gt;</a></td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2>Example</h2>
<h2>Elements</h2>
<p>The following elements can use the <code>fill</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
</ul>
Revert to this revision