<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1"> <desc>Example fillrule-evenodd - demonstrates fill-rule:evenodd</desc> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue"/> <defs> <path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none"/> </defs> <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3"> <path d="M 250,75 L 323,301 131,161 369,161 177,301 z"/> <use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(233.21,126.98) rotate(288)" overflow="visible"/> <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z"/> <use xlink:href="#Triangle" transform="translate(600,188) rotate(0) translate(107,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(600,188) rotate(120) translate(107,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(600,188) rotate(240) translate(107,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(600,188) rotate(60) translate(49,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(600,188) rotate(180) translate(49,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(600,188) rotate(300) translate(49,0) rotate(90)" overflow="visible"/> <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"/> <use xlink:href="#Triangle" transform="translate(950,188) rotate(0) translate(107,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(950,188) rotate(120) translate(107,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(950,188) rotate(240) translate(107,0) rotate(90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(950,188) rotate(60) translate(49,0) rotate(-90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(950,188) rotate(180) translate(49,0) rotate(-90)" overflow="visible"/> <use xlink:href="#Triangle" transform="translate(950,188) rotate(300) translate(49,0) rotate(-90)" overflow="visible"/> </g> </svg> |
Original SVG source |