xmlgraphics-batik-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Ian Ross" <ianc...@hotmail.com>
Subject filter element problem
Date Mon, 01 Sep 2003 18:37:03 GMT
Hi
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: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


Mime
View raw message