SVG筛选器导致图形被截去

Question

我试图在SVG创建的圆中添加一个过滤器，但只要添加任何类型的过滤器，圆的顶部和左侧就会被裁剪。我试着玩了所有的设置，包括x，y和宽度，但这有相当奇怪和意想不到的结果。看看网上的例子，似乎对他们也是一样的！例如，请参阅此处的W3示例http://www.w3schools.com/svg/tryit.asp?filename=trysvg_fegaussianblur.它看起来工作很好，但那是因为它是一个正方形，你不能告诉它是被裁剪！将其改为圆圈，更改：

rect width=“90”height=“90”stroke=“green”stroke-width=“3”fill=“yellow”filter=“URL(#F1)”

至

突然间碎片被剪掉了。我不认为我的圈子有什么问题？是什么导致了这一点，为什么我找不到任何其他的报告，即使所有的例子都这样做？！参见http://www.c-sharpcorner.com/uploadfile/99bb20/html5-inline-svg/，他们的例子也是这样做的！我在看Chrome和Firefox。

Answer 1

我想你应该定义x，y，宽度和高度。看这里：

<filter
   id="filter3755"
   inkscape:label="testfilter"
   x="-0.20000000000000001"
   y="-0.20000000000000001"
   height="1.3999999999999999"
   width="1.3999999999999999">
  <feGaussianBlur
     stdDeviation="3"
     id="feGaussianBlur3757" />
</filter>

这些值定义了相对于元素的位置和尺寸应用筛选器的区域。在上面的例子中，过滤器的原点位于元件的-0.2%处，宽度为1.4%且较高。

祝你好运