MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

« 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>, context-stroke, context-fill

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

Example 2: SVG rectangles with context fill

If you specify SVG as the image embedded by an element (commonly, the <img> element), you can get the embedded SVG to adopt property values set on the <img>. To do this, you first need to specify the properties whose values you wish to expose to the embedded SVG, using the -moz-context-properties property. For example:

img {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;
}

.img1 {
    fill: lime;
    stroke: purple;
}

Now we've done this, we can use the fill and stroke values in our SVG, for example:

<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                       <rect width='100%' height='100%' stroke-width='30px'
                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">

Here we've set the image src to a data URI containing a simple SVG image; the <rect> inside has been made to take its fill value from the stroke set on the <img> element by giving it the context-fill keyword as its value, along with a fallback color. Note that if a color is set directly on the SVG, but then the context color is also specified, the context color overrides the direct color.

Note: You can find a working example on Github.

Note: This feature is available since Firefox 55, but only enabled fully on Nightly; on other versions of Firefox you'll have to set the svg.context-properties.content.enabled pref to true, if the images aren't referenced via a chrome:// or resource:// URL.

See also

The following elements can use the fill attribute

文件標籤與貢獻者

 此頁面的貢獻者: chrisdavidmills, jalbertbowden, ahvigil, Daniel Hug, Jeremie
 最近更新: chrisdavidmills,