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

Question

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

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



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



如您所见，图标上通常具有渐变的点显示为黑色。我们无法弄清楚为什么。

以下是 Adob​​e XD 生成的 SVG 代码:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#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" width="24" height="24"/><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>

因为我们认为 Adob​​e 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" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#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" width="24" height="24"></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 版本中无法使用渐变的其他示例。

Answer 1

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

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

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

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

填充:网址(#a)

到:

填充:网址(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>