ios - SVG 中的线性渐变、滤镜、蒙版、剪辑路径未在 iOS 中显示

Question

背景

在我的第一个 Ionic4 PWA 中，我有一些复杂的渐变需求（感谢一位才华横溢的设计师，他也是 PWA 的新手）。

fill:url(#the-gradient);许多 SVG 自定义图标通过我们的 .scss 文件调用许多不同的线性渐变。其中一些图标有 9 种状态（灰色、7 种颜色、彩虹）

此外，这些渐变在停靠点中使用 CSS 变量来进一步自定义基于主题的渐变。这些渐变当前存储在 index.html 中，以便所有图标都可以访问它们。

<svg aria-hidden="true" focusable="false" style="width:0;height:0;position:absolute;">
    <defs>
      <linearGradient id="default-icon-graydient" x1="0" x2="0" ,="" y1="1" y2="0">
        <stop offset="0%" stop-color="var(--gratiu-dark-grey)"/>
        <stop offset="100%" stop-color="var(--gratiu-ml-grey)"/>
      </linearGradient>
      <linearGradient id="select-icon-gradient" x1="0" x2="0" ,="" y1="1" y2="0">
        <stop offset="0%" stop-color="var(--gratiu-current-color)"/>
        <stop offset="50%" stop-color="var(--gratiu-current-color)"/>
        <stop offset="100%" stop-color="var(--gratiu-next-color)"/>
      </linearGradient>
<!--and many, many more...-->
    </defs>
</svg>

该系统在 android 和桌面上完美运行 - 但是在 iOS 上，无论是 safari 还是 chrome，图标都不会出现。

我尝试过的事情：

• 首先，我在填充中添加了一种备用纯色，例如。fill: url(#select-icon-gradient) var(--gratiu-current-color);这可以保持它的功能，但这些渐变对于我们的用户来说是至关重要的信息，他们需要能够看到它们，而不仅仅是平面颜色
• 然后我尝试绝对链接到 index.htmlfill: url('http://localhost:8100/index.html#select-icon-gradient');但这在任何地方都不起作用
• 然后，我尝试将 SVG 代码存储在外部 SVG 中，但链接到该代码fill: url('http://localhost:8100/app/assets/img/gradients.svg#select-icon-gradient');仍然无法正常工作
• 我尝试将渐变移回每个 SVG 文件，而不是为它们链接到外部文件 仍然没有用。
• 我认为我真的很聪明，当我在其background属性中使用 CSS 渐变制作 div 时，但当需要调用使用 for 的路径时clip-path: url(#the-path)，我遇到了与渐变本身相同的问题。绝对链接不起作用。将 clipPath 和 CSS 内联在与图标在桌面上有效的同一页面上，但在 iOS 上无效。
• 顺便说一句，在此过程中，我还注意到应用 SVG 过滤器（投影）存在相同的问题。我能够找到一个可以使用包含 div 并在其上应用 CSS 过滤器的工作......但这并不理想。

我觉得我目前的选择是：

• 用 PNG 替换每一个图标样式，并使用 switch case 和 if 语句来调用需要即时更改的适当的样式。
• 使用每个渐变的光栅化版本为每个图标创建一个 SVG，使用 CSS 显示/隐藏每个单独的图像。

显然，单个 PNG 比一个大的填充 SVG 更轻……但 SVG 的好处是它会加载一次并完成它。

对于问题：

• 有什么我还没有尝试过的吗？有什么我忽略的吗？
• SVG 或 PNG 在 PWA 中是否更好？
• 为什么这个翻盘这么难？

标签： iosangularionic-frameworksvgionic4