fill
====

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.

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`

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

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



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

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 |

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` 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` 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 the color of the interior of the shape. (*Interior is define by the `fill-rule` 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 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>`, `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>` is deprecated and shouldn't be used.

For `<tref>`, `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 |
| --- |
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.