svg filter

by sirfizx

HTML

<div id='svgContainer'></div>

JavaScript

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", "200");
obj.setAttribute("height", "400");

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 diffuseFilter = document.createElementNS("http://www.w3.org/2000/svg", "feDiffuseLighting");
diffuseFilter.setAttribute("in","SourceGraphic");
diffuseFilter.setAttribute("result","diffOut");
diffuseFilter.setAttribute("diffuseConstant","1.2");
diffuseFilter.setAttribute("lighting-color","white");

var pointLight = document.createElementNS("http://www.w3.org/2000/svg", "fePointLight");
pointLight.setAttribute("x","100");
pointLight.setAttribute("y","100");
pointLight.setAttribute("z","150");
pointLight.setAttribute("pointsAtX","0");
pointLight.setAttribute("pointsAtY","0");
pointLight.setAttribute("pointsAtZ","0");

diffuseFilter.appendChild(pointLight);

var composite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
composite.setAttribute("in","SourceGraphic");
composite.setAttribute("in2","diffOut");
composite.setAttribute("operator","SourceGraphic");
composite.setAttribute("k1","1");
composite.setAttribute("k2","0");
composite.setAttribute("k3","0");
composite.setAttribute("k4","0");

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

mySvg.appendChild(obj);