fill

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

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

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

html

<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

警告: 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.

Value <paint>
Default value black
Animatable Yes

メモ: 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

警告: 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

メモ: 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

メモ: 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

メモ: 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

メモ: 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

メモ: 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

メモ: 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

メモ: 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

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

tref

警告: 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

メモ: 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

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

Specifications

Specification
SVG Animations Level 2
# FillAttribute
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

Browser compatibility

BCD tables only load in the browser

メモ: 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.