2

raphael ブラー プラグインに基づいてdropshadow.raphael.jsプラグインを実験しているときに、奇妙な問題が発生しました (css フィルター プラグインで試しましたが、同じ問題です)。

ベジエ パスを描画し、ドロップ シャドウを追加しています。

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

$contentpaper幅全体を取りたいので、私のラファエルです。私がしていることに使用することはできませんviewport。

しかし、このパスは Firefox や Opera では消えてしまいます(webkit ブラウザでうまく動作します)。

この問題を解決するにはどうすればよいですか? 現時点では、Firefox と Opera のこの行の影を無効にしていますが、これを行うためのより良い方法を見つけようとしています...

fiddleのライブ例を参照してください。

css filter pluginをもう一度試してみてください。

jQuery 1.9.1、Raphael 2.1.0、raphael dropshadow プラグインが含まれています。

編集

フィルターを適用するときに要素に高さが必要なため、線の代わりに四角形を使用することで修正されました (thanks Robert Longson) :

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

働くフィドル。

4

1 に答える 1

3

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

objectBoundingBox キーワードは、適用可能な要素のジオメトリに幅や高さがない場合 (水平線や垂直線の場合など) に使用しないでください。バウンディング ボックスの計算では、ストローク幅は無視されます。該当する要素のジオメトリに幅や高さがなく、objectBoundingBox が指定されている場合、指定された効果 (グラデーションやフィルターなど) は無視されます。

また、filterUnits のデフォルトは objectBoundingBox です。したがって、Opera と Firefox がフィルタを表示しないのは正しいことであり、そうする UA は SVG 仕様に正しく従っていません。

于 2013-04-12T10:57:23.347 に答える