# Fill and stroke

.fill() and .stroke() allow us to paint the SVG elements' interior and border. In fact, there are a lot of methods related. Let's review the most important.

# fill

The .fill() method defines how paints the interior of a specific SVG element. This fill can be a solid color, a gradient, or a pattern.

The .fill_rule() method indicates the mode to be used to fill a shape. The accepted values are nonzero, evenodd, or inherit (to take the value specified by its parent).

The value nonzero determines the "insideness" of a point in the shape by drawing a line from that point to infinity in any direction and then examining the places where a segment of the shape crosses the line. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.

The value evenodd determines the "insideness" of a point in the shape by drawing a line from that point to infinity in any direction and counting the number of path segments from the given shape that the line crosses. If this number is odd, the point is inside; if even, the point is outside.

The .fill_opacity() method defines the opacity level of the interior paint fill. A value 0 results in complete transparency, the value 1 is no transparency.

As with other visual properties, you can use CSS and the .style. object for handling.

# stroke

The .stroke() method defines the color border paint of SGV element, and .stroke_width() the border width. This stroke can be use in combination with .fill().

stroke_linecap() defines which shape the end of an open path will take and there are four acceptable values: butt, round, square, inherit.

.stroke_linejoin() defines how the corners of strokes will look on paths and basic shapes.

.stroke_linejoin('mitter') and .stroke_linejoin('mitter-clip') work together .stroke_miterlimit()) method. This last allows how far this joint/corner extends. This value is a limit on the ratio of the miter length to the .stroke_width(). The minimum value is 1.

With .stroke_dasharray() you can specify the length of the dash, and the distance between dashes, rather than solid lines.

Use .stroke_dashoffset() to specify the distance at which the dashes should start, and .stroke_opacity() to define the opacity. As with other visual properties, you can use CSS and the .style. members to configure these features.