我有一个包含直接在文档中嵌入一个线性渐变的SVG对象。 它可以在Chrome和Firefox罚款，但在Safari没有呈现。 如果我创建了SVG作为文件和使用对象标签嵌入它，它在Safari工作正常。 其他形状和填充的工作，它只是不工作线性渐变。 我想我可以使用的对象，但我宁愿直接嵌入SVG。
我在这里创建一个演示（在Chrome，Safari浏览器不工作）： http://jsfiddle.net/sjKbN/
我碰到这个答案提示的内容类型设置为application/xhtml+xml ，但是这本身似乎会导致其他问题。
只是想知道是否有人遇到任何其他修复或想法得到这个工作。
你梯度将在Safari工作，如果你换一个defs周围标签：
<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中的错误。
关于阿尔法：看来，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打破了我的角度应用程序的孩子路由，正确的解决方法是预先考虑到与页面相对位置的LinearGradient ID。 我包裹逻辑在这样的方法：
get svgFill(): string {
return `url(${this.location.path()}#${this.gradientId}) white`;
}
