Cordova 无法处理的具有线性渐变的 SVG - iOS

Posted 2023-03-28

技术标签:

【中文标题】Cordova 无法处理的具有线性渐变的 SVG - iOS【英文标题】：SVGs with linear gradient not handled by Cordova - iOS 【发布时间】：2020-09-21 23:08:19 【问题描述】：

我们正在使用 SVG 图标的 Ionic / Cordova 应用程序中实现图标，每当从 Adobe XD 导出并在应用程序的 ios 版本中实现时，图标的渐变部分会在 Web 上正确显示（基于 Chromium 的浏览器，如 Edge / Chrome) 和 android，但不适用于 iOS。

这是图标在 Chrome/Edge/Android 和 XD 中的正常外观：

这是图标在 Cordova - iOS 中的样子：

如您所见，图标上通常具有渐变的点显示为黑色。我们不知道为什么。

这是 Adobe XD 生成的 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 24 24"><defs><style>.afill:#fff;opacity:0;.bfill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;.b,.cstroke-miterlimit:10;.cstroke:#fff;fill:url(#a);</style><linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#d9315d"/><stop offset="1" stop-color="#dc2224"/></linearGradient></defs><g transform="translate(0 0)"><rect class="a"  /><g transform="translate(-1047.065 -371.769)"><path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"/><circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"/></g></g></svg>

因为我们认为 Adobe XD 可能会生成某种不合规的代码，所以我们决定将其通过一些 SVG 清理程序，例如：http://svg.enshrined.co.uk/，生成以下代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 24 24">
  <defs>
    <style>.afill:#fff;opacity:0;.bfill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;.b,.cstroke-miterlimit:10;.cstroke:#fff;fill:url(#a);</style>
    <linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#d9315d"></stop>
      <stop offset="1" stop-color="#dc2224"></stop>
    </linearGradient>
  </defs>
  <g transform="translate(0 0)">
    <rect class="a"  ></rect>
    <g transform="translate(-1047.065 -371.769)">
      <path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"></path>
      <circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"></circle>
    </g>
  </g>
</svg>

乍一看，它看起来更干净，但仍然不能解决我们的问题。

我们使用的大多数图标都以某种形式具有这种渐变。我们还有这些图标在 Cordova - iOS 版本中无法使用渐变的其他示例。

【问题讨论】：

【参考方案1】：

因此，渲染 SVG 可能与 Cordova 的关系不大，而是与特定的浏览器处理 SVG 的能力有关。

在您的情况下，您似乎在 css 中使用 url(...) 引用应用“渐变”。

Safari 在这种情况下引入了对 url 的要求，以具有“绝对”路径。

尝试使用相同的图标，但更改引用 url 的方式：

填充：url(#a)

到：

填写：url(https://yourwebsite.com/yourpage/#a)

Safari 基本上需要这样的东西：

填充：url( location.href #filterOrGradientId )

解决这个问题很痛苦。所以一个建议也可以是尝试使用 svg circle 元素上的 fill 属性来引用渐变。

来自 MDN 的示例：

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

【讨论】：

澄清一下，最初的问题不会在 Safari 上显示，而是在 iOS 上显示... @FlorianMonfort 有趣的是，我实际上测试了使用您发布的验证器生成的 svg，它在我的 macOS 上的 Safari 和 iOS 浏览器中都有效。你的意思是一旦你用 Cordova 打包它，它就不能在 webview 中正常工作？您使用的是哪个网络浏览器？ wkwebview（现在需要发布到 App Store）或 uiwebview（旧版本）？

以上是关于Cordova 无法处理的具有线性渐变的 SVG - iOS的主要内容，如果未能解决你的问题，请参考以下文章