3

我在这里使用 Raphael.js 使用 SVG 绘制时遇到了一个非常奇怪的问题。如果我在我绘制的三角形上设置不透明度，它会切断角落。然而，它在 Chrome 和 IE 中看起来不错。使用相同的三角形绘图，如果我将 opacity 更改为 1 或者如果我更改fill-opacity而不是 just 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 页面中......不！角落再次被切断。

关于发生了什么的任何想法？

4

0 回答 0