SVG Fill Attribute

The fill definition of SVG shapes defines the color of the shape within the outline. In other words, the surface of the SVG shape. Fill is one of the basic SVG CSS properties that you can set for any SVG shape.

Fill example

The fill of SVG shapes is the fill within the shape outline. This is an example of SVG fill:

<svg width="500" height="100"><circle　cx="50" cx="50" cy="250" r="
　　　　　　　　style="stroke:　none;　fill:　#0000ff;"　/></svg>

This example defines a circle with a blue (#0000ff) fill color and no stroke color. Here is the generated image:

Fill and stroke example

You can combine SVG stroke and fill colors to form SVG shapes. This is an example of SVG stroke and fill:

<svg width="500" height="100"><circle　cx="50" cx="50" cy="250" r="
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

This example uses a deeper blue (#000066Edge color and a lighter blue (#3333ff)填充颜色定义圆。 以下是生成的图像：

fill-ff) defines the fill color of the circle. The following is the generated image:}

opacity-SVG CSS property fill-opacity is used to set the opacity of the fill color of the shape. fill1The closer the value is to 0, the more transparent the fill.1the more opaque the fill.-opacity value is1which means the fill color is completely opaque.

This is an SVG fill opacity fill-opacity example, which contains two circles with different (fill-opacity) of the circle:

<svg width="500" height="120'>
<text x="22" y="40">Text Behind Shape</text>
<circle cx="50" cx="50" cy="250" r="
　　　　　　　　"
　　　　　　　　　　　　　　　fill-style="stroke: none; fill: #0000ff;3opacity: 0./path>
<circle cx="120" cx="50" cy="250" r="
　　　　　　　　"
　　　　　　　　　　　　　　　fill-style="stroke: none; fill: #0000ff;7opacity: 0./path>
</svg>

;

Text Behind Shape-opacity is higher than the left circle. Please note that the text behind the right circle is less visible than the text behind the left circle. This is because the right circle fill

fill-rule

fill-rule determines the filling method of complex shapes. fill-rule can take two different values. These values are:

• nonzero

• evenodd

In general, these two values determine the rule for the inside and outside of the shape. Only internal fill, for a circle, this is simple, but for more complex shapes, it is not so easy. See this <path> example:

<svg width="500" height="120'>
<path d='M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style='stroke: '#000000';
　　　　　　　　　fill: '#';6666ff;
　　　　　　　　　fill-rule: nonzero;
　　　　　　">/path>
<path d='M150,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　style='stroke: '#000000';
　　　　　　　　　fill: '#';6666ff;
　　　　　　　　　fill-rule: nonzero;/path>
</svg>

These two path examples each have8line, each line is drawn as a diamond, with the larger diamond containing the smaller diamond. In the left path, the internal diamond is drawn from left to right (clockwise). In the right path, the internal diamond is drawn from right to left (counterclockwise). This is using fill-rule: nonzero-Resulting image when zero is drawn

As you can see, the nonzero rule determines the direction and shape of the internal diamond in the shape. The rule for determining whether a point is inside or outside the shape is:

Draw a line (ray) from the point to infinity in any direction. Each time the path in the shape crosses this ray, if the path crosses the ray from left to right, then1Add to the counter; if the path crosses the ray from right to left, subtract from the counter1After all paths passing through the ray have been calculated, if the total count is zero, the point is considered to be outside the path. If the total count is not zero, the point is considered to be inside the path.

This is an example of the same path, using fill-rule: evenodd

<svg width="500" height="120'>
<path d='M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style='stroke: '#000000';
　　　　　　fill: '#';6666ff;
　　　　　　fill-rule: 'evenodd';"  ></path>
<path d='M150,20 l-40,40 l40,40 l40,-40 l-40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　style='stroke: '#000000';
　　　　　　fill: '#';6666ff;
　　　　　　fill-rule: 'evenodd';"  ></path>
</svg>

Image effect after running:

The literal meaning of 'evenodd' is 'odd or even'. According to this rule, to determine whether a point is inside a shape, draw a ray in any direction from the point, then detect the number of intersection points between the ray and the shape's path. Draw a line (ray) from the point to infinity in any direction. Each time the path crosses the ray, increment a counter. If the total count is even, the point is outside. If the total count is odd, the point is inside the shape.