fill - SVG: Scalable Vector Graphics 编辑

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.

As a presentation attribute, it can be applied to any element but it only has an effect on the following eleven elements: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>.

For animation five elements are using this attribute: <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>.

html,body,svg { height:100% }

<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>

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.

Note: As a presentation attribute fill can be used as a CSS property.

animate

For <animate>, fill defines the final state of the animation.

animateColor

Warning: As of SVG Animation 2 <animateColor> is deprecated and shouldn't be used. Use <animate> instead.

For <animateColor>, fill defines the final state of the animation.

animateMotion

For <animateMotion>, fill defines the final state of the animation.

animateTransform

For <animateTransform>, fill defines the final state of the animation.

circle

For <circle>, fill is a presentation attribute that defines the color of the circle.

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.

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)

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)

Note: As a presentation attribute fill can be used as a CSS property.

polyline

For <polyline>, fill is a presentation attribute that defines tthe color of the interior of the shape. (Interior is define by the fill-rule attribute)

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.

Note: As a presentation attribute fill can be used as a CSS property.

set

For <set>, fill defines the final state of the animation.

text

For <text>, fill is a presentation attribute that defines what the color of the text.

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.

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.

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.

Note: As a presentation attribute fill can be used as a CSS property.

Specifications

Browser compatibility

BCD tables only load in the browser

Note: For information on using the context-fill (and context-stroke) values from HTML documents, see the documentation for the non-standard -moz-context-properties property.