fill

fill 属性には使われ方により2つの意味があります.  1つは図形やテキストに使われた場合で，その要素を塗りつぶす色を意味します．もう1つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します．

呈示属性(presentation attribute)として全ての要素に適用可能ですが，実際に影響があるのは次の11の要素です: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>.

アニメーションとしては次の5つの要素で使われています: <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

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.