SVG线性渐变在Safari中不起作用 [英] SVG Linear gradient doesn't work in Safari

问题描述

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

I've got an SVG object that contains a linear gradient embedded directly in a document. It works fine in Chrome and Firefox, but in Safari nothing is rendered. If I create the SVG as a file and embed it using the Object tag, it works fine in Safari. Other shapes and fills work, it's just linear gradient that doesn't work. I guess I could use the object, but I'd prefer to embed the SVG directly.

我在这里创建了一个演示（适用于Chrome，不适用于Safari）： http://jsfiddle.net/sjKbN/

I've create a demo here (works in Chrome, not Safari): http://jsfiddle.net/sjKbN/

我遇到了这个答案，它建议将内容类型设置为 application / xhtml + xml ，但这本身似乎会导致其他问题。

I came across this answer which suggests setting the content type to application/xhtml+xml, but this in itself seems to cause other problems.

只是想知道是否有人碰到过任何问题。其他修复或想法让这个工作。

Just wondering if anyone had come across any other fixes or ideas to get this working.

推荐答案

如果你包装，你的渐变将在Safari中有效defs 围绕它标记：

Your gradient will work in Safari if you wrap a defs tag around it:

<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中的一个错误。

​It seems that wrapping your references in defs is encouraged but not obligatory according to spec. So this is a bug in Safari.

这篇关于SVG线性渐变在Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！