我们正在使用 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" 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>
因为我们认为 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" 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 版本中无法使用渐变的其他示例。
最佳答案
因此,渲染 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>
关于ios - Cordova 无法处理的具有线性渐变的 SVG - iOS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62169665/