I use the following to create a bevel effect for a button. The problem is that the button shows up as a black box on the svg canvas. However when i view the svg file created, on IE, it appears the way i want it to. Can anyone spot any problems?
Any help will be greatly appreciated. thanks in advance.
Ian
In the code below 'root' refers to the svg element and is passed to this method as an argument.
Element defs = document.createElementNS(svgNS, "defs");
Element filter = document.createElementNS(svgNS, "filter");
filter.setAttributeNS(null, "id", "Bevel");
filter.setAttributeNS(null, "filterUnits", "objectBoundingBox");
filter.setAttributeNS(null, "x", "-10%");
filter.setAttributeNS(null, "y", "-10%");
filter.setAttributeNS(null, "width", "150%");
filter.setAttributeNS(null, "height", "150%");Element feGaussianBlur = document.createElementNS(svgNS, "feGaussianBlur");
feGaussianBlur.setAttributeNS(null, "in", "SourceAlpha");
feGaussianBlur.setAttributeNS(null, "stdDeviation", "3");
feGaussianBlur.setAttributeNS(null, "result", "blur");
Element feSpecularLighting = document.createElementNS(svgNS, "feSpecularLighting");
feSpecularLighting.setAttributeNS(null, "in", "blur");
feSpecularLighting.setAttributeNS(null, "surfaceScale", "5");
feSpecularLighting.setAttributeNS(null, "specularConstant", "0.5");
feSpecularLighting.setAttributeNS(null, "specularExponent", "10");
feSpecularLighting.setAttributeNS(null, "result", "specOut");
feSpecularLighting.setAttributeNS(null, "style", "lighting-color:rgb(255,255,255)");
Element fePointLight = document.createElementNS(svgNS, "fePointLight");
fePointLight.setAttributeNS(null, "x", "-5000");
fePointLight.setAttributeNS(null, "y", "-10000");
fePointLight.setAttributeNS(null, "z", "20000"); Element feComposite1 = document.createElementNS(svgNS, "feComposite");
feComposite1.setAttributeNS(null, "in", "specOut");
feComposite1.setAttributeNS(null, "in2", "SourceAlpha");
feComposite1.setAttributeNS(null, "operator", "in");
feComposite1.setAttributeNS(null, "result", "specOut2"); Element feComposite2 = document.createElementNS(svgNS, "feComposite");
feComposite2.setAttributeNS(null, "in", "SourceGraphic");
feComposite2.setAttributeNS(null, "in2", "specOut2");
feComposite2.setAttributeNS(null, "operator", "arithmetic");
feComposite2.setAttributeNS(null, "k1", "0");
feComposite2.setAttributeNS(null, "k2", "1");
feComposite2.setAttributeNS(null, "k3", "1");
feComposite2.setAttributeNS(null, "k4", "0");
feComposite2.setAttributeNS(null, "result", "litPaint"); feSpecularLighting.appendChild(fePointLight);
filter.appendChild(feGaussianBlur);
filter.appendChild(feSpecularLighting);
filter.appendChild(feComposite1);
filter.appendChild(feComposite2);
defs.appendChild(filter);
root.appendChild(defs);Element e = document.createElementNS(svgNS, "rect");
e.setAttributeNS(null, "x", "100");
e.setAttributeNS(null, "y", "150");
e.setAttributeNS(null, "width", "100");
e.setAttributeNS(null, "height", "50");
e.setAttributeNS(xlinkNS, "style", "fill:rgb(0,128,128);stroke:rgb(0,0,0);stroke-width:1;filter:url(#Bevel)");
root.appendChild(e);
_________________________________________________________________
Get less junk mail with ninemsn Premium. Click here http://ninemsn.com.au/premium/landing.asp
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
