1

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

矩形宽度=“90”高度=“90”笔画=“绿色”笔画宽度=“3”填充=“黄色”过滤器=“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。

4

2 回答 2

4

我认为你必须定义 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 本身也必须足够大......

于 2012-09-07T08:41:17.277 回答
1

只需给外部<svg>元素一个高度，使其足以容纳内容。例如高度=“300”。默认值为 300 像素 x 150 像素，这对于您的示例路径来说是不够的。

如果你把它变大，矩形也会发生同样的事情，例如 height="200"

于 2012-09-07T08:40:56.390 回答