如何在 iOS 上使用具有透明度的 fontello 图标答案

【问题标题】：How to use fontello icons with transparency on iOS如何在 iOS 上使用具有透明度的 fontello 图标
【发布时间】：2019-05-20 13:30:52
【问题描述】：

我对使用 fontello 从 svg 生成的自定义字体图标有疑问。在 PC 上，图标可以正常工作，但在 iOS 浏览器上我没有透明度。所有源 svg 都包含填充规则：evenodd。

我找不到我的问题的解决方案，如果你知道如何解决这个问题，请帮助。

在 PC 上自定义 fontello 图标可以正常工作，但在 iOS 上我遇到了问题。我不确定 Android 是否运行良好，但 iOS 具有更高的优先级。

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

桌面效果（ok）：https://ibb.co/9pfZFnf 对 iOS 的影响（不好）：https://ibb.co/Y846vb0

【问题讨论】：

标签： ios svg fonts icons fontello

【解决方案1】：

显然它没有得到 css 规则。请尝试像这样使用 css，尽管我不太确定这会起作用。

<style type="text/css">
        <![CDATA[
       .cls-1 {
        fill-rule: evenodd;
        }
        ]]> 
  </style>

或者，您可以反转d 属性的第二部分（孔），这样您就不需要使用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>

【讨论】：