How do I make a polygon that intersects another transparent

Question

I would like to change the color of polygons that are inside another polygons, but I can't change their colors, they stay black no matter what.

Here's the code :

<!--  Logo Blue Flower -->
<svg height="1000" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
   <polygon points="0,200 200,0 400,0 600,200 600,600 300,1000 0,600" style="fill:#e6f2ff;stroke:#00001a;stroke-width:1" />
   <polyline points="300,975 280,950 280,430 300,415 320,430 320,950" style="fill=#00bfff;stroke:#00131a;stroke-width:1"/>
   <polygon points="0,600 185,323 0,200 250,75 200,0 300,50 400,0 350,75 600,200 415,323 600,600 300,400" style="fill:#33ccff;stroke:#00131a;stroke-width:1"/>
   <polygon points="300,400 185,323,300,150 415,323" style="fill=#ffffffff;stroke:#00131a;stroke-width:1"/>
   <polygon points="300,150 250,75 300,50 350,75" style="fill=#ffffffff;stroke:#00131a;stroke-width:1"/>

</svg>

Answer 1

Presentation styles inside svg have higher priority than CSS styles. Therefore, they must be removed and rendered in separate CSS

#p1 {
fill:#e6f2ff;stroke:#00001a;stroke-width:1;
}
#p2 {
fill:#00bfff;stroke:#00131a;stroke-width:1;
}
#p3 {
fill:#33ccff;stroke:#00131a;stroke-width:1;
} 
#p4 {
fill:orange;stroke:#00131a;stroke-width:1;
}
#p5 {
fill:orange;stroke:#00131a;stroke-width:1;
}

<!--  Logo Blue Flower -->
<svg height="1000" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
   <polygon id="p1" points="0,200 200,0 400,0 600,200 600,600 300,1000 0,600"  />
   <polyline id="p2" points="300,975 280,950 280,430 300,415 320,430 320,950" />
   <polygon id="p3" points="0,600 185,323 0,200 250,75 200,0 300,50 400,0 350,75 600,200 415,323 600,600 300,400" />
   <polygon id="p4" points="300,400 185,323,300,150 415,323" />
   <polygon id="p5" points="300,150 250,75 300,50 350,75" />

</svg>

If you have styles inside the svg file, then you need to write as @enxaneta commented:

<style type="text/css"> <![CDATA[ /*styles*/ ]]> </style>

<!--  Logo Blue Flower -->
<svg height="1000" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
	#p1 {
fill:#e6f2ff;stroke:#00001a;stroke-width:1;
}
#p2 {
fill:#00bfff;stroke:#00131a;stroke-width:1;
}
#p3 {
fill:#33ccff;stroke:#00131a;stroke-width:1;
} 
#p4 {
fill:orange;stroke:#00131a;stroke-width:1;
}
#p5 {
fill:orange;stroke:#00131a;stroke-width:1;
}
]]> </style>

   <polygon id="p1" points="0,200 200,0 400,0 600,200 600,600 300,1000 0,600"  />
   <polyline id="p2" points="300,975 280,950 280,430 300,415 320,430 320,950" />
   <polygon id="p3" points="0,600 185,323 0,200 250,75 200,0 300,50 400,0 350,75 600,200 415,323 600,600 300,400" />
   <polygon id="p4" points="300,400 185,323,300,150 415,323" />
   <polygon id="p5" points="300,150 250,75 300,50 350,75" />

</svg>

• If there are a lot of SVG files in your application, it’s more convenient to put all the styles in a separate CSS file. In this case, you must add a link to this CSS file in each SVG file

<?xml-stylesheet type="text/css" href="css/icon.css" ?>

<!--  Logo Blue Flower -->
<?xml-stylesheet type="text/css" href="css/icon.css" ?>
<svg height="1000" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">

   <polygon id="p1" points="0,200 200,0 400,0 600,200 600,600 300,1000 0,600"  />
   <polyline id="p2" points="300,975 280,950 280,430 300,415 320,430 320,950" />
   <polygon id="p3" points="0,600 185,323 0,200 250,75 200,0 300,50 400,0 350,75 600,200 415,323 600,600 300,400" />
   <polygon id="p4" points="300,400 185,323,300,150 415,323" />
   <polygon id="p5" points="300,150 250,75 300,50 350,75" />

</svg>