Weergave van inline SVG komt niet overeen

[Mr. Nakata]

Ik ben bezig met het maken van een iconen set. Nu is er de situatie dat een aantal SVG's zichzelf opvullen terwijl dit bij andere iconen niet gebeurt (de gewenste situatie). Een voorbeeld is het 'Search'-icoon die ik in de volgende codepen heb opgenomen: https://codepen.io/littleweing/pen/ZEpzrYQ

In de codepen staat een comment met een ander icoon die ook gesloten randen bevat, maar zichzelf niet opvult. Deze heb ik op exact dezelfde manier behandeld als het 'Search'-icoon.


Voorbeeld waarin het probleem naar voren komt:


Voorbeeld waarin het werkt zoals verwacht:


——————————

Ondernomen stappen:

1. Ik heb het icoon in Affinity Designer uitgewerkt en als geheel geëxporteerd. Hij bestaat dus uit één <path>





In finder wordt het icoon correct weergeven:



——————————

2. Vervolgens heb ik Visual Studio Code gebruikt om het <path> te kopiëren naar de HTML

Onbewerkte code:

code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect id="search" x="-0.029" y="0" width="24" height="24" style="fill:none;"/>
<path d="M14.377,15.818c-1.355,1.054 -3.057,1.682 -4.906,1.682c-4.415,0 -8,-3.585 -8,-8c0,-4.415 3.585,-8 8,-8c4.416,-0 8,3.585 8,8c0,1.848 -0.628,3.551 -1.682,4.906c0.015,0.014 0.03,0.028 0.045,0.043l5.844,5.844c0.391,0.39 0.391,1.024 0,1.414c-0.39,0.39 -1.024,0.39 -1.414,0l-5.844,-5.844c-0.015,-0.015 -0.029,-0.03 -0.043,-0.045Zm-4.906,-12.318c3.312,-0 6,2.689 6,6c0,3.311 -2.688,6 -6,6c-3.311,0 -6,-2.689 -6,-6c0,-3.311 2.689,-6 6,-6Z" style="fill:#2979ff;"/>
</svg>

<path>:

code:

M14.377,15.818c-1.355,1.054 -3.057,1.682 -4.906,1.682c-4.415,0 -8,-3.585 -8,-8c0,-4.415 3.585,-8 8,-8c4.416,-0 8,3.585 8,8c0,1.848 -0.628,3.551 -1.682,4.906c0.015,0.014 0.03,0.028 0.045,0.043l5.844,5.844c0.391,0.39 0.391,1.024 0,1.414c-0.39,0.39 -1.024,0.39 -1.414,0l-5.844,-5.844c-0.015,-0.015 -0.029,-0.03 -0.043,-0.045Zm-4.906,-12.318c3.312,-0 6,2.689 6,6c0,3.311 -2.688,6 -6,6c-3.311,0 -6,-2.689 -6,-6c0,-3.311 2.689,-6 6,-6Z

Dit is hetzelfde <path> die in de codepen is gebruikt.

——————————

Als je de onbewerkte code op bijvoorbeeld https://jakearchibald.github.io/svgomg/ invoert dan weergeeft hij het icoon gewoon correct. Wat zorgt ervoor dat de huidige opzet van mijn HTML en CSS dit niet doet?

[Knutselsmurf]

Helemaal achteraan de svg-tag staat nog essentiele style-informatie, die je niet over hebt genomen naar je codepen

[Mr. Nakata]

Ah dat is hem inderdaad. 'fill-rule: evenodd;' miste. Bedankt!