문제

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).

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)

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 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.

But this path simply disappear on Firefox or Opera (working great with webkit browser).

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...

See a live example on fiddle.

Another try with the css filter plugin.

Included jQuery 1.9.1, Raphael 2.1.0 and the raphael dropshadow plugin.

Edit

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'});

Working fiddle.

도움이 되었습니까?

해결책

Per http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBox

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top