Comment ajouter un filtre à un objet SVG en JavaScript ?

Question

J'essaie de créer et d'ajouter un filtre feGaussianBlur à un rectangle SVG à l'aide de JavaScript. ce code comme référence. J'obtiens un rectangle, mais il n'est pas filtré. Qu'est-ce que je fais de mal ?

J'essaie comme ça :

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);

Answer 1

Le code ci-dessus fonctionne pour moi maintenant ! On peut simplement utiliser l'option createElementNS , setAttribute y appendChild méthodes.

Answer 2

Si, comme moi, vous préférez un code plus lisible svg.js a maintenant un plugin de filtre svg . Votre exemple de code se réduirait à :

var draw = SVG('canvas')

draw.rect(90,90)

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

C'est probablement un an trop tard, mais cela vaut quand même la peine de le mentionner :)