html5 – SVG线性渐变在Safari中不起作用

我有一个SVG对象,其中包含直接嵌入文档中的线性渐变.它在Chrome和Firefox中运行良好,但在Safari中没有任何内容呈现.如果我将SVG创建为文件并使用Object标签嵌入它,它在Safari中可以正常工作.其他形状和填充工作,它只是线性渐变不起作用.我想我可以使用该对象,但我更喜欢直接嵌入SVG.

在这里创建了一个演示(适用于Chrome,而非Safari):http://jsfiddle.net/sjKbN/

我遇到了this answer,建议将内容类型设置为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中包含你的引用但不是强制性的according to spec.所以这是Safari中的一个错误.

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码