Beispiel:SVG-42-fill-rule.html

<!DOCTYPE html> <html lang="de"> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>

.normal {

 stroke: steelblue;
 stroke-width: 2;
 fill: gold;
 fill-rule: evenodd;  
 }

.normal:hover, .normal:focus {

 fill-rule: nonzero;

} svg {

 width: 100%;
 min-height: 200px;
 }

text {font-family:monospace; font-size: 12px;}

 </style>
 <title>Beispiel: fill-rule</title>

</head>

<path id="starDavid" class="normal" tabindex="2" transform="translate(200,0)"

  		d="m100,10 l82,142 h-164 z
      	   m-82,47 h164 l-82,142 z"/>

<path class="normal" tabindex="3"

      d="m550,10
        c -134,0 20,268 87,151
          67,-117 -241,-117 -174,0
          67,117 221,-151 87,-151
        z" />

<text x="320" y="200">fill-rule: evenodd;</text>

</svg>

Bewege die Maus über die Elemente, um fill-rule="nonzero" zu aktivieren.

</body> </html>

Navigationsmenü