使用 feGaussian Blur 的外发光被剪裁[重复]答案

【问题标题】：Outer Glow Using feGaussian Blur is Clipped [duplicate]使用 feGaussian Blur 的外发光被剪裁[重复]
【发布时间】：2017-03-22 13:19:45
【问题描述】：

我想用id="svg_6" 为图像设置外发光对于这个目标椭圆标签，使用id="f1" 过滤使其发光。我想设置 feOffset dx = 0 和 feOffset dy = 0 ，但输出辉光似乎被裁剪了。如何解决？我希望结果与所附照片相似。

<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>

【问题讨论】：

如果您将其尺寸设置为“0”，则 feOffset 不会执行任何操作

标签： html svg svg-filters

【解决方案1】：

它被裁剪了，因为您告诉它通过将过滤器的 x 和 y 值设置为 0 来进行裁剪。我已将它们更改为 -50%，以便过滤器区域覆盖形状上方和左侧的区域以及形状本身。

<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>

【讨论】：