Question

我在这里使用Raphael.js使用SVG进行绘制时遇到了一个非常奇怪的问题。如果我在绘制的三角形上设置不透明度，则会切掉角落。然而，它在Chrome和IE中显得很好。使用相同的三角形绘图，如果我将不透明度更改为1，或者如果我更改fill-opacity而不是opacity，则会正确渲染。更奇怪的是，使用完全相同的代码和库在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'
            });

这是jsFiddle：http://jsfiddle.net/crisp330/26PaS/

以下是我的FF版本16.0.2上的内容：http://grab.by/hBWK

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

关于最新情况的任何想法？

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

0 个答案: