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

到

path filter =“url（＃f1）”fill =“none”stroke =“＃385370”d =“M87,15A72,72,0,1,1,86.99,15”stroke-width =“30”

然后突然被裁剪掉了。我不认为我的圈子有什么问题？造成这种情况的原因是什么，即使所有的例子都做到了，我怎么也找不到任何其他报道？！另见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％，高。

祝你好运

编辑::

就像在另一个答案中提到的那样，svg本身也必须足够大......

Answer 2

只需为外部<svg>元素指定一个高度，以便它对内容足够大。例如高度= “300”。默认值为300px x 150px，这对于您的示例路径是不够的。

如果你把它做得更大，就会发生同样的事情，例如：高度= “200”

SVG过滤器会导致图形被切断

2 个答案: