11

SVGでドロップシャドウ付きの単純な円を描画しようとしていますが、何らかの理由で上下のエッジがクリップされています。これはChromeとSafariの両方で発生します。

ここに画像の説明を入力してください

w3schoolsチュートリアルのSVGドロップシャドウで見つけたコードを使用していますが、代わりに円を使用するように変更されています。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <circle r="30" cx="50" cy="50" style="stroke:gray; fill:aliceblue; stroke-width:3px" filter="url(#f1)" />
</svg>

円を動かしたり、SVGコンテナのサイズを大きくしたりしてみましたが、同じ結果になりました。また、さまざまなドロップシャドウチュートリアルをグーグルで検索し、常に円を使用するようにサンプルコードを変更してみました。毎回同じ結果。

では、SVGでドロップシャドウを使用して単純な円を描くにはどうすればよいですか？

4

2 に答える 2

17

問題はフィルターのオフセットにあることがわかりました。円の周りには、新しく追加されたフィルターに対応するのに十分なパディングがありません。これを追加するには、次の属性を使用します（必要に応じて調整します）。

<filter id="f1" x="-20%" y="-20%" width="200%" height="200%">

xとyは、フィルターのボックスを左上に配置します。これは、以前は欠けていたものです。次に、幅と高さでボックスのサイズを指定します。この場合、200％はやり過ぎですが、より大きな影には必要な場合があります。

于 2012-09-26T00:26:27.947 に答える
2

これを置き換えます： <filter id="f1" x="0" y="0" width="200%" height="200%">

これに： <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">

例を参照してください：http： //jsfiddle.net/sRfck/1/

于 2012-09-26T00:31:43.707 に答える