我如何在JavaScript中将过滤器添加到SVG对象中？
我正在尝试使用JavaScript创建并添加feGaussianBlur过滤器到SVG矩形，使用此代码作为参考。 我得到一个矩形，但它没有被过滤。 我究竟做错了什么？
我想这样：
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);
上面的代码现在适用于我！ 可以简单地使用createElementNS ， setAttribute和appendChild方法。
如果你喜欢更可读的代码 - 像我一样 - svg.js现在有一个svg过滤器插件。 您的示例代码将简化为：
var draw = SVG('canvas')
draw.rect(90,90)
rect.filter(function(add) {
add.gaussianBlur('15')
})
这可能是一年太晚了，但仍值得一提:)
链接地址: http://www.djcxy.com/p/60083.html