Raphael dropshadow插件在svg路徑上的Firefox和opera問題

我在嘗試使用基於raphael blur插件的dropshadow.raphael.js插件（我嘗試使用css過濾器插件，同一問題）時出現了一個奇怪的問題。Raphael dropshadow插件在svg路徑上的Firefox和opera問題

我畫一個貝塞爾路徑並添加陰影效果：

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還）。

比我畫一條直線，用相同的陰影像這樣：

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。

但是這條道路只需Firefox或Opera消失（工作偉大的WebKit瀏覽器）。

我該如何解決這個問題？目前，我只是禁用Firefox和Opera的這一行上的影子，但我試圖找到一個更好的方式來做到這一點...

請參閱live example on fiddle。

另一個嘗試與css filter plugin。

包含jQuery 1.9.1，Raphael 2.1.0和raphael dropshadow插件。

編輯

通過使用一個矩形的，而不是一條線，因爲該元件需要具有高度應用濾波器（感謝羅伯特Longson）時修正：

var borderBottom = paper.path("M 0,100 H800 v1 H0 Z"); 
borderBottom.attr({'fill':'#000000', 'stroke-width':'0'});

Working fiddle.

來源

2013-04-12 soyuka

您應該向插件作者報告插件中的錯誤。似乎至少有2個。a）它使用相同的陰影ID創建多個過濾器。b）假設具有陰影的對象具有寬度或高度。最重要的是，您可以報告您*做*的事實，將webkit上的陰影視爲未遵循SVG規範的webkit bug。 –

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

柯yword objectBoundingBox當適用元素的幾何圖形沒有寬度或沒有高度時（例如水平線或垂直線的情況）時，不應使用yword objectBoundingBox，即使該線由於具有非零筆觸寬度而被查看時具有實際厚度對於邊界框計算，筆劃寬度將被忽略。當適用元素的幾何圖形沒有寬度或高度，並且指定了objectBoundingBox時，則會忽略給定效果（例如漸變或過濾器）。

而filterUnits的默認值是objectBoundingBox。因此，Opera和Firefox都不會顯示過濾器，並且任何這樣做的UA都不會正確地遵循SVG規範。

來源

2013-04-12 10:57:23

謝謝你，我同意，但我的路徑有一個寬度不是嗎？這是由jQuery編程設置的理由。我會嘗試找到一種方法來設置這個路徑的一些高度。 – soyuka

對，它沒有高度這個問題。 –

[固定jsfiddle]（http://jsfiddle.net/CqFMj/5/）感謝您指出我在正確的方向！ – soyuka

Raphael dropshadow插件在svg路徑上的Firefox和opera問題

回答

相關問題