Question

svg.append("defs")
.append("filter").attr("id", "blur")
.attr("x", "-50%").attr("y", "-50%")
.attr("height", "200%").attr("width", "200%")
.append("feGaussianBlur").attr("in", "SourceGraphic").attr("stdDeviation", 10);

我在javascript中看到了这些代码。我试着谷歌，但仍然无法理解什么是js中的“defs”。

BTW，谁能解释一下什么是“过滤器”？

非常感谢！

Answer 1

在我看来，您的代码是使用SVG的高斯模糊滤镜的一些实现。所以defs和filter确实存在SVG概念，而不是JavaScript。

`defs`

SVG允许定义图形对象以供以后重用。它是建议尽可能定义引用的元素在一个defs元素里面。在defs中定义这些元素元素促进了SVG内容的可理解性促进可访问性。 defs中定义的图形元素不会直接渲染。您可以使用元素来渲染它们元素在视口上的任何位置。

`filter`

filter元素用作原子过滤操作的容器。它永远不会直接渲染。使用the引用过滤器目标SVG元素上的filter属性。

`feGaussianBlur`

滤镜使输入图像模糊指定的量 stdDeviation，定义钟形曲线。

来自Mozilla的文档

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

什么是javascript / svg中的defs

1 个答案:

`defs`

`filter`

`feGaussianBlur`