I've a problem with custom font icons generated from svg using fontello. On PC, icons works fine, but on iOS browsers I haven't transparency. All source svg contains fill-rule: evenodd.
I can't find solution for my problem, if You know how solve this issue, please help.
On PC custom fontello icons works fine, but on iOS I've a problem. I'm not sure if the Android works well, but iOS has a higher priority.
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Zm16-9-3,3-3,4L9,21,8,27l1,6,2,4,4,4,3,2,2,1,5,1h4l4-1,4-2,4-3,2-4,2-6V25l-1-5-1-2-2-3-3-3-3-2L28,8,21,9l-3,1Z"/>
</svg>
Effect on Desktop (ok): https://ibb.co/9pfZFnf Effect on iOS (not ok): https://ibb.co/Y846vb0
Apparently it didn't get the css rules. Please try to use the css like this, although I'm not very sure this will work.
<style type="text/css">
<![CDATA[
.cls-1 {
fill-rule: evenodd;
}
]]>
</style>
Alternatively you can reverse the second part of the d attribute (the hole) so that you don't need to use the fill-rule: evenodd;
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Z
M18,10L21,9L28,8L35,10L38,12L41,15L43,18L44,20L45,25L45,29L43,35L41,39L37,42L33,44L29,45L25,45L20,44L18,43L15,41L11,37L9,33L8,27L9,21L10,18L13,14L16,11z"/>
</svg>