ドロップシャドウをつけたオブジェクトをSVGで書き出した際にキワキワで切れてしまう

[ぽんぽろりん]

ドロップシャドウをつけたオブジェクトをSVGで書き出した際にキワキワで切れてしまい、ドロップシャドウのオフセット部分？ぼかし部分？が切れてしまいます。

JPGで書き出した際のイメージでSVGでも書き出したいです。

以前、SVGの書き出し設定を見直したのですが、直らず...

書き出し設定は

スタイル：内部CSS

フォント：アウトラインに変換

画像：埋め込む

オブジェクトID：レイヤー名

小数点以下の桁数：3

です。他に触るべき設定などありますでしょうか...

環境は Mac mini M1 2020 

Memory 16GB

SSD512GB

です。

[higuchiyasuyuki · Accepted solution]

同じようにやってみましたがドロップシャドウ部分の表示は切れて見えますね。データがないわけではなく表示エリアがアウトライン化した文字オブジェクトに合わせて生成されているので、その表示エリアのサイズ指定が広ければ表示されると思います。

SVGの書き出したデータの次の用途がどのような場合かによって変わると思いますが、てっとり早くマージンを設定して表示したいのであれば、塗りと線がなしの長方形を文字全体を囲むように追加します。ようするにダミーのボックスを作っておくことで、表示エリアをそのダミーのボックスにして表示させることができると思います。

[ぽんぽろりん]

当方コーディングをしていて、先方支給のデータに多数こういったものがあるんですよね。

ご回答のように長方形でスペースを確保してここ一年は対応していましたが、どうしても1つ2つぬけてしまうのが心配で解決方法を質問しておりました。設定などで対応できればいいのですが...

[Ten A]

ビットマップ埋め込みなら予めアピアランスを拡張した状態で処理するとどうでしょう？

もっとも、SVG書き出し前提ならSVGフィルターを利用するのが筋の良い手順です。

以下のSVGフィルターを利用すると良いでしょう。

<filter id="AI_shadow1" width="150%" height="150%" x="-25%" y="-25%">
  <feGaussianBlur  in="SourceAlpha" result="blur" stdDeviation="2.5" />
  <feOffset  dx=".5" dy=".5 " in="blur" result="shadow" />
  <feComposite  in="shadow" in2="SourceGraphic" operator="arithmetic"
    k1="-1" k2="0.2" k3="0" k4="0" />
</filter>

[ぽんぽろりん]

少し特殊なレスポンシブ対応のコーディングですので、SVGフィルターで対応するのは厳しいかもしれませんが、検討してみます。