web-dev-qa-db-ja.com

SVGシャドウカットオフ

私が使用しているSVGには、feGaussianBlurフィルターによるドロップシャドウがあります。

シャドウ自体は適切に表示されますが、上端と下端が切り取られます。

そのようです：

image of cutoff shadow

問題のSVGは次のとおりです。

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg
  PUBLIC '-//W3C//DTD SVG 1.1//EN'
  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="600" version="1.1" width="700" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <filter id="SVGID_0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="6.6"/>
    <feOffset dx="0" dy="0"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <path d="M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122" stroke-linecap="round" style="stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);" transform="translate(50 50)" />
</svg>

Chrome（30）、Firefox（25）、およびOpera（12）で一貫してトリミングが行われているようです。

600x700に設定されているため、ビューボックスの制限ではないことがわかります。

<path>要素の境界ボックスをdevtoolsインスペクターで確認することもできますが、それはまるで影を落としているようです。

path bounding box

だとしたら：

  1. なぜ影は垂直ではなく水平に切り取られるのですか？
  2. このように切り取られないように回避するにはどうすればよいですか？

それが境界ボックスでない場合、何が原因で、このクリッピングを回避するにはどうすればよいですか？

svgshadowclippingsvg-filters
54
kangax

フィルター領域のサイズを大きくする必要があります。

<filter id="SVGID_0" y="-40%" height="180%">

正常に動作します。フィルター領域のサイレントデフォルトは次のとおりです。x= "-10％" y = "-10％" width = "120％" height = "120％"-通常、大きなぼかしは切り取られます。 （幅は高さの約2.5倍なので、シャドウは水平方向にクリップされません。10％の結果、水平方向のフィルター領域が広くなります）。また、yフィルター領域は、パスにゼロピクセルストロークがあるかのように計算されているように見えるため、ストローク幅は無視されます。 （ブラウザーごとに、ストロークをフィルター領域の計算のために境界ボックスの一部と見なすかどうかに応じて、動作が異なります。）

（更新：コメントから観測を上に移動）特定の形状が幅ゼロまたは高さゼロの場合（たとえば、水平線または垂直線）、次に mustフィルター宣言の一部としてfilterUnits="userSpaceOnUse"を指定し、userSpaceUnits（通常はピクセル）でフィルター領域（x、y、width height）を明示的に指定して、シャドウを表示するのに十分なスペースを作成します。

81
Michael Mullany

上記のコメントで述べたように、私にとっての修正は、filter shadow svgタグに属性を追加することでした。

filterUnits="userSpaceOnUse"

最終出力：

<filter id="dropshadow" height="130%" width="130%" filterUnits="userSpaceOnUse">

これにより、影が絶対的に配置され、コンテナの外側に表示されます。

8
Jack Nicholson

HTML内で使用している場合は、CSSプロパティを使用してこの問題を修正できます。

svg {
  overflow: visible !important;
}

他のブラウザはチェックしていませんが、chromeにはoverflow: hidden svgタグではデフォルトで。

少し遅れますが、参考になれば幸いです。

4
Daniel Reina