Как сделать многоугольник, который пересекает другой прозрачный

Question

Я хотел бы изменить цвет полигонов, которые находятся внутри других полигонов, но я не могу изменить их цвета, они остаются черными, несмотря ни на что.

Вот код:

<!--  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

Стили презентации внутри svg имеют более высокий приоритет, чем стили CSS.Следовательно, они должны быть удалены и отображены в отдельном 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>

Если у вас есть стили внутри файла svg, то вам нужно написать как @enxaneta комментарий:

<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>

• Если в вашем приложении много SVG-файлов, удобнее поместить все стили в отдельный CSS-файл.В этом случае необходимо добавить ссылку на этот файл CSS в каждый файл SVG

<?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>