具有线性梯度的SVG不由Cordova-iOS处理

我们正在使用SVG图标的Ionic/Cordova应用程序中实现图标，无论何时从Adobe XD导出，并在应用程序的iOS版本中实现，图标的渐变部分都会正确显示在Web（基于铬的浏览器，如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" 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>

.a{fill:#fff；不透明度：0；}.b{fill:none；stroke:#5d5d5d；stroke linecap:round；stroke width:1.5px；}.b，.c{stroke miterlimit:10；}.c{stroke:#fff；fill:url（#a）}

因为我们认为Adobe XD可能会产生某种不兼容的代码，所以我们决定将其通过某种SVG消毒剂，如下面的：，生成以下代码：

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

.a{fill:#fff；不透明度：0；}.b{fill:none；stroke:#5d5d5d；stroke linecap:round；stroke width:1.5px；}.b，.c{stroke miterlimit:10；}.c{stroke:#fff；fill:url（#a）}

乍一看，它确实更干净了，但仍然不能解决我们的问题

---

我们使用的大多数图标都有这样或那样的渐变。在Cordova-iOS版本中，我们还有其他无法使用渐变的图标示例。

因此，呈现SVG可能与Cordova无关，但与处理SVG的特定浏览器功能有关

在您的例子中，似乎您在css中使用url（…）引用应用了“渐变”

Safari对url提出了一个要求，在本例中，url必须具有“绝对”路径

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

填充：url（#a）

致：

填充：url（）

基本上，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中就不能正常工作了吗？您正在使用哪个Web视图？wkwebview（现在需要发布到应用商店）还是uiwebview（旧版本）？