milad-ahmadi04 milad-ahmadi04 - 28 days ago 21
HTML Question

Outer Glow Using feGaussian Blur is Clipped

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>





enter image description here

Answer

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>