Question

我正在使用大量SVG元素的网站上工作。最近我看到这些元素在Chrome版本39.0.2171.95米和Opera中呈现。但是，Firefox版本34.0.5和Internet Explorer 11的情况并非如此。我已经检查了这个答案

根据上面的回答，它说这是FF 16中的一个错误，但他们已经在最新版本的FF中解决了它，即使在IE11中也是如此，据我所知，SVG不是IE11的问题。现在奇怪的是，所有简单的SVG文件都被渲染，但是复杂的矢量文件（例如iPhone 5的矢量）在IE和FF中不会呈现 ONLY 。下面是一个不在FF或IE中工作的SVG：

<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="210px" height="211.5px" viewBox="0 0 210 211.5" style="enable-background:new 0 0 210 211.5;" xml:space="preserve">

<style type="text/css">
.st0{fill:#FF5200;}
.st1{fill:none;stroke:#FF5200;stroke-width:7;stroke-miterlimit:10;}
</style>

<filter id="drop">
   <feOffset result = "offOut" in = "#ff5500" dx = "0" dy = "0"/>
   <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "4"/>
    <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/>
</filter>

<g id="bolt">
<polygon filter="url(#drop)" class="st0" points="138.1,42.5 63.9,116.3 105.2,116.3 70.2,172.3 146.3,98.5 105.1,98.5     "/>

点击this Fiddle这样您就可以更好地了解这个问题。

我在Illusrator CS6中创建了SVG。所以我的问题是这里的现象是什么？我在这做什么错？这是IE和FF中的错误吗？我正在使用SVG，因为我想要合并一些SVG动画。这个问题有什么好的后备可以解决吗？我能否就这个具体问题获得一些好的资源？如果这些信息不充分，我很抱歉，因为我是SVG动画的初学者因此我在学习阶段对建议，批评等开放。如果需要任何额外信息，请告诉我，我会回复。

编辑：请检查FF，IE和Chrome中的the Fiddle以查看差异。

感谢您的帮助！

Answer 1

这是因为你的过滤器：
将此行<feOffset result = "offOut" in = "#000000" dx = "0" dy = "10"/>更改为此<feOffset result = "offOut" in = "SourceGraphic" dx = "0" dy = "10"/>

它会起作用。

你告诉过滤器来自颜色而不是过滤器原语（检查http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveInAttribute）

Updated Fiddle

SVG未在Firefox 34.0.5和IE 11中呈现

1 个答案: