Outer Glow Using feGaussian Blur is Clipped

Question

i want to set outer-glow for image with id="svg_6" for this target ellipse tag is used and filter with id="f1" makes it glow. i want to set feOffset dx = 0 and feOffset dy = 0 ,but output glow seems croped. how to fix it? I expect result seems similar to the attached photo.

<svg style="background:black;" width="1000" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
  <filter  id="f1" x="0" y="0" width="300%" height="300%">
    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="90" />
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>
</defs>
<!--glow effect end-->
 <g>
  <title>Layer 1</title>
  <ellipse ry="235" rx="192.5" id="svg_9" cy="401.00001" cx="498.99999"  fill="#5fbf00" style="filter:url(#f1)"/>
    <image xlink:href="http://ssssssss.ir/wp-content/uploads/2016/11/beyzi1.png" id="svg_5" height="480" width="480" y="160" x="260"  />
    <image xlink:href="http://ssssssss.ir/wp-content/uploads/2016/11/beyzi.png"  id="svg_6" height="500" width="500" y="150" x="250"/>
 </g>
</svg>

That feOffset doesn't do anything if you set its dimensions to "0" — Michael Mullany, Nov 09 '16 at 04:45

score 1 · Accepted Answer · answered Nov 08 '16 at 21:37

It's cropped because you told it to crop by setting the x and y values for the filter to 0. I've changed them to -50% so that the filter area covers the region above and to the left of the shape as well as the shape itself.

<svg style="background:black;" width="1000" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
  <filter  id="f1" x="-50%" y="-50%" width="200%" height="200%">
    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="90" />
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>
</defs>
<!--glow effect end-->
 <g>
  <title>Layer 1</title>
  <ellipse ry="235" rx="192.5" id="svg_9" cy="401.00001" cx="498.99999"  fill="#5fbf00" style="filter:url(#f1)"/>
    <image xlink:href="http://ssssssss.ir/wp-content/uploads/2016/11/beyzi1.png" id="svg_5" height="480" width="480" y="160" x="260"  />
    <image xlink:href="http://ssssssss.ir/wp-content/uploads/2016/11/beyzi.png"  id="svg_6" height="500" width="500" y="150" x="250"/>
 </g>
</svg>

Outer Glow Using feGaussian Blur is Clipped

1 Answers1