SVG路径上的Raphael dropshadow插件Firefox和Opera问题 [英] Raphael dropshadow plugin firefox and opera issue on a svg path
问题描述
在尝试 dropshadow.raphael.js 插件时，我遇到了一个奇怪的问题基于raphael模糊插件(我尝试使用css过滤器插件，同样的问题).
I'm having a strange issue while experimenting the dropshadow.raphael.js plugin based on raphael blur plugin (I tried with the css filter plugin, same issue).
我正在绘制Bezier路径并添加阴影:
I am drawing a Bezier path and adding the dropshadow :
var borderBottomRounded = paper.path("M150,100C20,200,600,200,400,100");
borderBottomRounded.attr({'stroke':'#000000', 'stroke-width':'1'});
borderBottomRounded.dropShadow(1,0,1,0.5); // dropShadow(size, offsetX, offsetY, opacity = 1)
在那里，阴影在每个浏览器上都可以正常工作(尚未尝试使用IE).
There, the shadow is working fine on every browser (haven't tried IE yet).
比起我绘制一条直线，具有相同的阴影:
Than I'm drawing a straight line, with the same shadow like this :
var borderBottom = paper.path("M 0,100 L800, 100");
borderBottom.attr({'stroke':'#000000', 'stroke-width':'1'});
borderBottom.dropShadow(1,0,1,0.5);
$content是我的拉斐尔paper，因为我希望它占据整个宽度.我无法将viewport用于正在执行的操作.
$content is my raphael paper because I want it to take the whole width. I'am not able to use viewport for what I'm doing.
但是此路径仅在Firefox或Opera上消失(与Webkit浏览器配合使用).
But this path simply disappear on Firefox or Opera (working great with webkit browser).
如何解决此问题?目前，我只是在Firefox和Opera的这一行上禁用了阴影，但是我正在尝试找到一种更好的方法来实现此目的...
How may I fix this issue ? For the moment, I'm just disabling the shadow on this line for Firefox and Opera, but I'm trying to find a better way of doing this...
在小提琴上查看实时示例.
再尝试使用 css过滤器插件.
包括jQuery 1.9.1，Raphael 2.1.0和raphael dropshadow插件.
Included jQuery 1.9.1, Raphael 2.1.0 and the raphael dropshadow plugin.
修改
通过使用rect而不是直线来解决，因为在应用过滤器时元素需要具有高度(感谢Robert Longson):
Fixed by using a rect instead of a line, because the element needs to have a height when applying a filter (thanks Robert Longson) :
var borderBottom = paper.path("M 0,100 H800 v1 H0 Z");
borderBottom.attr({'fill':'#000000', 'stroke-width':'0'});
推荐答案
每 http ://www.w3.org/TR/SVG/coords.html#ObjectBoundingBox
关键字objectBoundingBox时，该线具有实际的粗细，也不应使用它.笔划宽度为非零值，因为在边界框计算中将忽略笔划宽度.当适用元素的几何没有宽度或高度且指定了objectBoundingBox时，将忽略给定的效果(例如，渐变或滤镜).
并且filterUnits的默认值为objectBoundingBox.因此，Opera和Firefox不显示过滤器是正确的，并且任何这样做的UA均未正确遵循SVG规范.
And the default for filterUnits is objectBoundingBox. So Opera and Firefox are right not to display the filter and any UA that does so is not following the SVG Specification correctly.
这篇关于SVG路径上的Raphael dropshadow插件Firefox和Opera问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
