SVG“填充：网址（＃....）”在Firefox

举止异常

<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>'

我通过各个之间的CSS和开关设定的text元件的fill属性梯度取决于悬停状态。这在Chrome & Safari中效果很好，但在Firefox中，文本不显示。检查元素后，我发现Firefox在我的fill: url(#...) CSS属性的末尾附加了none。我尝试使用Firebug删除none关键字，但Firebug只是删除了整个属性。这是为什么发生？

编辑： 我要指出的是，如果我删除设置fill属性CSS和硬编码fill属性为text元件（未通过在线style属性），文本正确显示在所有浏览器。

来源

2013-02-27 Nathan Friend

你的真实CSS是什么样的，去那个SVG？至于“没有”的事情，“fill：url（whatever）none”与“fill：url（whatever）”是一样的;都说，如果网址上的东西不可用，那就没有后备，也不应该画任何东西。 – 2013-02-28 06:35:40

@BorisZbarsky谢谢，我没有意识到'没有'指定没有找到第一个资源时会发生什么。 – 2013-02-28 14:45:21

想通了。在我的CSS，我指的是梯度以同样的方式我本来引用填充在线：

#myselector { 
    fill: url('#gradient-id'); 
}

为了得到它在Firefox的工作，我不得不把它改成这样：

#myselector { 
    fill: url('/#gradient-id'); 
}

不知道这是为什么。也许它与包含我的样式表的目录结构有关？

来源

2013-02-28 14:48:24

样式表中的相对'url（）'相对于样式表被解析。所以如果你的样式表和SVG在不同的目录中，你可能根本没有链接到SVG。 – 2013-02-28 17:00:43

Webkit并没有这样做，我很肯定Boris在前一段时间向他们的bugtracker报告。 – 2013-02-28 18:32:01

嗨鲍里斯，我也有这个问题，我见过你经常在Firefox的错误报告评论，你能解释为什么填充：网址（“＃gradient-id”）没有找到该渐变ID在在css中指定的dom，但内联？我不在我的页面外加载svgs ... Chrome的这个实现是否不正确？这似乎应该是预期的行为。 – Daniel 2013-04-05 17:55:28

SVG“填充：网址（＃...）”在Firefox中行为怪异，当我们分配下面的代码与CSS

#myselector { 
fill: url('#gradient-id'); 
}

解决方案

给内联（外部和内部的CSS）。造型，这可以通过两种方式完成。静态或动态的方式

动态方式

.attr('fill', 'url(#gradient-id)')

静态的方式

fill="url(#gradient-id)"

在静态的，你必须把这个在SVG的Html;

来源

2014-03-28 16:13:16

谢谢。另一个被接受的答案似乎只在从根URL查看svg时才能修复（反之亦然）。 – Chase 2017-01-10 18:19:23

也风格属性的作品，其中CSS类没有。例如 .. – luky 2017-02-22 09:51:46

-1

我与SVG中的linearGradient有相同的问题 - 仍然在2017年。我猜测，问题在于Firefox像url('#gradient-id')一样使用普通URL和应用规则<base href=""/> metatag。评论一下，然后检查。

来源

2017-04-20 08:44:45 lukdur

问题中没有基本标记。这个问题是关于解析CSS样式表中的url。它是根据样式表本身（如CSS规范所述）还是使用该样式表的文档（如Chrome所做的）来解决的。 – 2017-04-20 08:50:34

当然，这不是 - 我只是认为这可能是它无法正常工作的原因。这是我的理由。它不是关于stylesheet，而是放置** id **标签（这里是** gradient-id **）。由于某些原因使用相对路径**＃gradient-id ** with ** base ** metatag打破了某些内容，并且FF无法在任何地方找到** gradient-id **标记。在我的情况下，它不工作在HTML（在SVG圈）和CSS或JS与相对路径。这是工作时，我删除**基地**标记或设置绝对路径在js像**。attr（'stroke'，“url（”+ window.location.href +“＃gradient-id）”** – lukdur 2017-04-20 09:22:17

元标记也影响到Safari @lukdur。那么，你对这个问题的解决方法是什么？设置绝对路径？ – 2017-05-31 06:23:52

SVG“填充：网址（＃....）”在Firefox

回答

相关问题