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

The SVG presentationalfill attribute and the CSSfill property can be used with the following SVG elements:

• <circle>
• <ellipse>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tspan>

The SVGfill attribute can be used to define the final animation state with the following SVG elements:

• <animate>
• <animateMotion>
• <animateTransform>
• <set>.

Examples

Basic color and gradient fills, and animation

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

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">  <!-- Basic color fill -->  <circle cx="50" cy="50" r="40" fill="pink" />  <!-- Fill circle with a gradient -->  <defs>    <radialGradient>      <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>

context-fill example

In this example, we define three shapes using<path> elements, each with a differentstroke andfill color set on them. We also define a<circle> element as a marker via the<marker> element. Each shape has the marker applied via themarker CSS property.

The<circle> hasstroke="context-stroke" andfill="context-fill" set on it. Because it is being set as a marker in the context of the shapes, these attributes cause it to inherit thefill andstroke set on the<path> element in each case.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">  <style>    path {      stroke-width: 2px;      marker: url("#circle");    }  </style>  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"        stroke="red" fill="orange" />  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"        stroke="green" fill="lightgreen" />  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"        stroke="blue" fill="lightblue" />  <marker markerWidth="12" markerHeight="12"          refX="6" refY="6" markerUnits="userSpaceOnUse">    <circle cx="6" cy="6" r="3" stroke-width="2"            stroke="context-stroke" fill="context-fill"  />  </marker></svg>

The output is as follows:

animate

For<animate>,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.

ellipse

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

path

For<path>,fill is a presentation attribute that defines the color of the interior of the shape. (The interior is defined by thefill-rule attribute orfill-rule property.)

polygon

For<polygon>,fill is a presentation attribute that defines the color of the interior of the shape. (The interior is defined by thefill-rule attribute orfill-rule property.)

polyline

For<polyline>,fill is a presentation attribute that defines the color of the interior of the shape. (The interior is defined by thefill-rule attribute orfill-rule property.)

rect

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

set

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

text

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

textPath

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

tspan

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

Specifications

Browser compatibility

svg.elements.animate.fill

svg.elements.animateMotion.fill

svg.elements.animateTransform.fill

svg.elements.circle.fill

svg.elements.ellipse.fill

svg.elements.path.fill

svg.elements.polygon.fill

svg.elements.polyline.fill

svg.elements.rect.fill

svg.elements.set.fill

svg.elements.text.fill

svg.elements.textPath.fill

svg.elements.tspan.fill

See also

• CSSfill property