old:carto:net - Fill rules on polygons

carto:papers:svg:examples:basic:fill_rules

Fill rules on polygons

On the left you see different fills of the same shape (egg and star). These effects are possible thanks to fill rules on polygons.

These cases often apply to cartography with islands and "donuts" (the second example below shall only show the topological correctness of the graphic. Mouseover the areas and watch the status bar of the browser window.

Files used

Right-click, save ...

polys.shtml
polys.svg

Technical Details

The attribute that allows this is fill-rule. It may take these values, where the first one is the default:

fill-rule="nonzero"
fill-rule="evenodd"

The appliance of these fill rules also depends on the direction of the vertices within a path. See www.w3.org/TR/SVG/painting for more detailed explanations on fill rules.

Last modified: Tuesday, 10-Dec-2019 21:41:05 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/polys.shtml