[英]SVG Linear gradient doesn't work in Safari
我有一个 SVG 对象,它包含直接嵌入在文档中的线性渐变。 它在 Chrome 和 Firefox 中运行良好,但在 Safari 中没有任何渲染。 如果我将 SVG 创建为文件并使用 Object 标签嵌入它,它在 Safari 中工作正常。 其他形状和填充有效,只是线性渐变无效。 我想我可以使用该对象,但我更喜欢直接嵌入 SVG。
我在这里创建了一个演示(适用于 Chrome,而不是 Safari): http : //jsfiddle.net/sjKbN/
我遇到了这个答案,它建议将内容类型设置为application/xhtml+xml
,但这本身似乎会导致其他问题。
只是想知道是否有人遇到过任何其他修复或想法来使其正常工作。
如果你在它周围包裹一个defs
标签,你的渐变将在 Safari 中工作:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0.0595" style="stop-color:#FFE029"/>
<stop offset="0.1303" style="stop-color:#FFD218"/>
<stop offset="0.2032" style="stop-color:#FEC90F"/>
<stop offset="0.2809" style="stop-color:#FDC70C"/>
<stop offset="0.6685" style="stop-color:#F3903F"/>
<stop offset="0.8876" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
</defs>
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/>
</svg>
根据规范,似乎鼓励将您的引用包装在defs
中,但不是强制性的。 所以这是Safari中的一个错误。
关于 Alpha :似乎 Safari(此时为 7)不覆盖 SVG 颜色 alpha 通道,使用停止不透明度属性。 它工作正常!
<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok
接受的答案对我来说不是解决方案。
我的问题是我的索引文件中存在<base href="/" />
标记。 只需将其删除即可为我解决问题。
如果您无法删除它,则可能已经存在一些解决方法:找到了这个要点,但我没有对其进行测试。
更新
简单地删除 href 破坏了我的 angular 应用程序的子路由,正确的解决方法是在 linearGradient id 前面加上页面相对位置。 我将逻辑包装在这样的方法中:
get svgFill(): string {
return `url(${this.location.path()}#${this.gradientId}) white`;
}
答案很简单,对于所有 SVG 文件,所有 id(不仅是<linear gradient>
)都需要唯一。
我在制作具有线性渐变的内联 SVG 时也遇到了一些麻烦。 设计者在<linearGradient
的 id 中加入了-
。 解决方案就像删除它一样简单。
<linearGradient id="linear-gradient">
...
<path fill="url(#linear-gradient)" d="..."/>
和
<linearGradient id="lineargradient">
...
<path fill="url(#lineargradient)" d="..."/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.