fill

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

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

アニメーションとしては次の5つの要素で使われています: <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>.

<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> (en-US) is deprecated and shouldn't be used.

For <altGlyph> (en-US), fill is a presentation attribute that defines the color of the glyph.

Value	<paint>
Default value	`black`
Animatable	Yes

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

animate

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

Value	`freeze` (Keep the state of the last animation frame) \| `remove` (Keep the state of the first animation frame)
Default value	`remove`
Animatable	No

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.

Value	`freeze` (Keep the state of the last animation frame) \| `remove` (Keep the state of the first animation frame)
Default value	`remove`
Animatable	No

animateMotion

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

Value	`freeze` (Keep the state of the last animation frame) \| `remove` (Keep the state of the first animation frame)
Default value	`remove`
Animatable	No

animateTransform

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

Value	`freeze` (Keep the state of the last animation frame) \| `remove` (Keep the state of the first animation frame)
Default value	`remove`
Animatable	No

circle

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

Value	<paint>
Default value	`black`
Animatable	Yes

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.

Value	<paint>
Default value	`black`
Animatable	Yes

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 (en-US) attribute)

Value	<paint>
Default value	`black`
Animatable	Yes

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 (en-US) attribute)

Value	<paint>
Default value	`black`
Animatable	Yes

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 (en-US) attribute)

Value	<paint>
Default value	`black`
Animatable	Yes

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.

Value	<paint>
Default value	`black`
Animatable	Yes

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

set

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

Value	`freeze` (Keep the state of the last animation frame) \| `remove` (Keep the state of the first animation frame)
Default value	`remove`
Animatable	No

text

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

Value	<paint>
Default value	`black`
Animatable	Yes

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

textPath

For <textPath> (en-US), fill is a presentation attribute that defines the color of the text.

Value	<paint>
Default value	`black`
Animatable	Yes

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

tref

Warning: As of SVG2 <tref> (en-US) is deprecated and shouldn't be used.

For <tref> (en-US), fill is a presentation attribute that defines the color of the text.

Value	<paint>
Default value	`black`
Animatable	Yes

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.

Value	<paint>
Default value	`black`
Animatable	Yes

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

Specifications

Specification	Status	Comment
SVG Animations Level 2 transform の定義	編集者草案	Definition for animations
Scalable Vector Graphics (SVG) 2 fill の定義	勧告候補	Definition for shapes and texts. Adds `context-fill` and `context-stroke`.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) fill の定義	勧告	Initial definition for animations
Scalable Vector Graphics (SVG) 1.1 (Second Edition) fill の定義	勧告	Initial definition for shapes and texts

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.