如何在 JavaScript 中向 SVG 对象添加过滤器？答案

【问题标题】：How can I add a filter to a SVG object in JavaScript?如何在 JavaScript 中向 SVG 对象添加过滤器？
【发布时间】：2012-06-07 16:45:46
【问题描述】：

我正在尝试使用 JavaScript 创建 feGaussianBlur 过滤器并将其添加到 SVG 矩形，并使用 this code 作为参考。我得到一个矩形，但它没有被过滤。我做错了什么？

我正在尝试这样：

var container = document.getElementById("svgContainer");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
mySvg.setAttribute("version", "1.1");
container.appendChild(mySvg);

var obj = document.createElementNS("http://www.w3.org/2000/svg", "rect");
obj.setAttribute("width", "90");
obj.setAttribute("height", "90");

var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");

var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
filter.setAttribute("id","f1");
filter.setAttribute("x","0");
filter.setAttribute("y","0");

var gaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
gaussianFilter.setAttribute("in","SourceGraphic");
gaussianFilter.setAttribute("stdDeviation","15");

filter.appendChild(gaussianFilter);
defs.appendChild(filter);
mySvg.appendChild(defs);    
obj.setAttribute("filter","url(#f1)");

mySvg.appendChild(obj);

【问题讨论】：

标签： javascript svg svg-filters

【解决方案1】：

上面的代码现在对我有用！可以简单地使用createElementNS、setAttribute 和appendChild 方法。

【讨论】：

感谢您回来回答

【解决方案2】：

如果您喜欢更易读的代码 - 就像我一样 - svg.js 现在有一个 svg filter plugin。您的示例代码将简化为：

var draw = SVG('canvas')

draw.rect(90,90)

rect.filter(function(add) {
  add.gaussianBlur('15')
})

可能已经晚了一年，但仍然值得一提:)

【讨论】：