Firefox中设置不透明度的SVG/Raphael问题

我在这里面临一个非常奇怪的问题，使用Raphael.js使用SVG绘制。如果我在绘制的三角形上设置不透明度，它会切掉角。然而，它在铬和IE中看起来很好。使用相同的三角形图形，如果我将“不透明度”更改为1，或者如果我将

填充不透明度

而不仅仅是

不透明度

，它将正确渲染。更奇怪的是，在jsFiddle中使用相同的代码和库创建一个演示会很好。我仔细检查了Raphael.js的版本，为了以防万一再次更新了我的版本，等等

有人知道这是怎么发生的吗

以下是我使用的代码：

            var paper = Raphael(0,0, 800, 800);
            var triangle1 = paper.path('M295,738 l0,-738 l500,0 Z')
            var triangle2 = paper.path('M200,200 l0,-100 l100,0 Z')

            triangle1.attr({
                fill: '#fff',
                'opacity': '0.5'
            });

            triangle2.attr({
                fill: '#fff',
                opacity: 1,
                stroke: 'red'
            });

以下是JSFIDLE：

下面是我的FF版本16.0.2上的外观：

我甚至直接从JSFIDLE复制了iFrame源代码（在FF中对我来说是正确的），并将其粘贴到一个新的HTML页面中。。。不！拐角处又被切断了

---

有什么想法吗？

如果你转到你的jsFiddle，用Ctrl+滚轮缩小，三角形的角会为你修剪吗？看起来Firefox没有正确地缩放三角形。这可能与您的问题有关。在相同的设置下，iframe源代码直接粘贴到加载到FF16.0.2的html文件中，对我有效。您是否有任何诸如Style之类的插件可能正在预处理或以其他方式影响您的SVG？我想不出有任何插件会导致这种情况。至少就目前而言，我最终单独设置了填充不透明度（幸运的是，我最终不需要任何笔划），这并没有导致剪切问题。@Ryan-是的，当我按住Ctrl+鼠标滚轮时，确实会在小提琴上剪切角，这很有趣。我敢肯定，在最初的时候，我是在一个正常的缩放设置，当我单独查看它。我得再核实一下，看看情况是否如此。