如何在JavaScript中向SVG对象添加过滤器?
我试图使用JavaScript创建feGaussianBlur过滤器,并将其添加到SVG矩形中,作为参考。我得到一个矩形,但它没有过滤。我做错了什么 我试着这样做:如何在JavaScript中向SVG对象添加过滤器?,javascript,svg,svg-filters,Javascript,Svg,Svg Filters,我试图使用JavaScript创建feGaussianBlur过滤器,并将其添加到SVG矩形中,作为参考。我得到一个矩形,但它没有过滤。我做错了什么 我试着这样做: var container = document.getElementById("svgContainer"); var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); mySvg.setAttribute("version", "1.1"
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);
以上代码现在适用于我!您可以简单地使用
createElements
、setAttribute
和appendChild
方法。如果您喜欢可读性更强的代码,就像我一样,现在有了一个新的方法。您的示例代码将简化为:
var draw = SVG('canvas')
draw.rect(90,90)
rect.filter(function(add) {
add.gaussianBlur('15')
})
可能已经晚了一年,但仍然值得一提:)感谢您回来提供答案