CSS SVG "fill: url(#....)" 在 Firefox 中表现异常
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15123953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG "fill: url(#....)" behaving strangely in Firefox
提问by Nathan Friend
I have the following SVG graphic:
我有以下 SVG 图形：
<svg width='36' height='30'>
<defs>
<linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/>
</linearGradient>
<linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/>
<stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/>
</linearGradient>
<linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/>
<stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text>
</svg>'
I set the fillattribute of the textelement through CSS and switch between the various gradients depending on the hover state. This works great in Chrome & Safari, but in Firefox, the text doesn't show up. Upon inspecting the element, I discovered that Firefox is appending noneto the end of my fill: url(#...)CSS attribute. I tried deleting the nonekeyword with Firebug, but Firebug just deletes the entire attribute. Why is this happening?
我通过 CSS设置元素的fill属性，text并根据悬停状态在各种渐变之间切换。这在 Chrome 和 Safari 中效果很好，但在 Firefox 中，文本不显示。在检查元素时，我发现 Firefox 附加none到我的fill: url(#...)CSS 属性的末尾。我尝试none用 Firebug删除关键字，但 Firebug 只是删除了整个属性。为什么会这样？
EDIT:I should note that if I remove the CSS that sets the fillproperty, and hardcode the fillattribute into the textelement (not through an inline styleattribute), the text displays properly in all browsers.
编辑：我应该注意，如果我删除设置fill属性的 CSS，并将属性硬编码fill到text元素中（而不是通过内联style属性），则文本会在所有浏览器中正确显示。
回答by Nathan Friend
Figured it out. In my CSS, I was referring to the gradients in the same way I was originally referencing the fill inline:
弄清楚了。在我的 CSS 中，我以与最初引用内联填充相同的方式引用渐变：
#myselector {
fill: url('#gradient-id');
}
To get it working in Firefox, I had to change it to this:
为了让它在 Firefox 中工作，我不得不把它改成这样：
#myselector {
fill: url('/#gradient-id');
}
Not sure why this is. Maybe it has something to do with the directory structure containing my stylesheet?
不知道这是为什么。也许它与包含我的样式表的目录结构有关？
回答by Shailender Singh
SVG “fill: url(#…)” behave strangely in Firefox when we assigning the below code with css(both external and internal css.)
当我们使用 css（外部和内部 css）分配以下代码时，SVG “fill: url(#...)” 在 Firefox 中的行为很奇怪。
#myselector {
fill: url('#gradient-id');
}
Solution
解决方案
give inline styling, this can be done in both the ways. Static or dynamic way
提供内联样式，这可以通过两种方式完成。静态或动态方式
Dynamic way
动态方式
.attr('fill', 'url(#gradient-id)')
Static way
静态方式
fill="url(#gradient-id)"
In static you have to put this in the SVG Html;
在静态中，您必须将其放在 SVG Html 中；
回答by lukdur
I had same problem with linearGradientin SVG – still in 2017. I guess, the problem is that Firefox treat url('#gradient-id')like normal URL and applied rules of <base href=""/>metatag. Comment it out and check then.
我linearGradient在 SVG 中遇到了同样的问题——仍然在 2017 年。我想，问题是 Firefoxurl('#gradient-id')像对待普通 URL 和应用<base href=""/>元标记规则一样对待。把它注释掉然后检查。
