• Create BookmarkCreate Bookmark
• Create Note or TagCreate Note or Tag
• PrintPrint

## Paths and Filling

The information described in Chapter 3 in Section 3.5.1 is also applicable to paths, which can not only have intersecting lines, but can also have “holes” in them. Consider the paths in Example 6-4, both of which draw nested squares. In the first path, both squares are drawn clockwise; in the second path, the outer square is drawn clockwise and the inner square is drawn counterclockwise.

Example 6-4. Using different fill-rule values on paths
```<!-- both paths clockwise -->
<path d="M 0 0, 60 0, 60 60, 0 60 Z
M 15 15, 45 15, 45 45, 15 45Z"/>

<!-- outer path clockwise; inner path counterclockwise -->
<path d="M 0 0, 60 0, 60 60, 0 60 Z
M 15 15, 15 45, 45 45, 45 15Z"/>```

Figure 6-14 shows that there is a difference when you use a `fill-rule` of `nonzero`, which takes into account the direction of the lines when determining whether a point is inside or outside a path. Using a `fill-rule` of `evenodd` produces the same result for both paths; it uses total number of lines crossed and ignores their direction.

PREVIEW

Not a subscriber?

Start A Free Trial

• Create BookmarkCreate Bookmark
• Create Note or TagCreate Note or Tag
• PrintPrint