Return to Snippet

Revision: 60022
at October 16, 2012 18:20 by Syllogism


Initial Code
// create svg container 
            var vSVGElem = document.createElementNS('http://www.w3.org/2000/svg', "svg:svg");
            vSVGElem.setAttributeNS(null, "x", 0);
            vSVGElem.setAttributeNS(null, "y", 0);
            vSVGElem.setAttributeNS(null, "width", '230px');
            vSVGElem.setAttributeNS(null, "height", '110px');
            vSVGElem.setAttributeNS(null, "viewBox", '0 0 230 110');
            vSVGElem.setAttributeNS(null, "enable-background", 'new 0 0 230 110');
            
            // defs elements contains filter
            var defsElement = document.createElementNS('http://www.w3.org/2000/svg', "defs");
            var filterElement = document.createElementNS('http://www.w3.org/2000/svg', "filter");
            filterElement.setAttributeNS(null, "id", "f1");
            filterElement.setAttributeNS(null, "x", "-10%");
            filterElement.setAttributeNS(null, "y", "-10%");
            filterElement.setAttributeNS(null, "width", "200%");
            filterElement.setAttributeNS(null, "height", "200%");
            
            // offset is the element we're going to use to create the dropshadow. some we want drop shadow directly underneath element offset is 0,0
            var feOffset = document.createElementNS('http://www.w3.org/2000/svg', "feOffset");
            feOffset.setAttributeNS(null, "result", "offOut");
            feOffset.setAttributeNS(null, "in", "SourceAlpha");
            feOffset.setAttributeNS(null, "dx", "0");
            feOffset.setAttributeNS(null, "dy", "0");

            // now we blur the 'result'
            var feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', "feGaussianBlur");
            feGaussianBlur.setAttributeNS(null, "result", "blurOut");
            feGaussianBlur.setAttributeNS(null, "in", "offOut");
            feGaussianBlur.setAttributeNS(null, "stdDeviation", "2");

            var feBlend = document.createElementNS('http://www.w3.org/2000/svg', "feBlend");
            feBlend.setAttributeNS(null, "in", "SourceGraphic");
            feBlend.setAttributeNS(null, "in2", "blurOut");
            feBlend.setAttributeNS(null, "mode", "normal");

            filterElement.appendChild(feOffset);
            filterElement.appendChild(feGaussianBlur);
            filterElement.appendChild(feBlend);
            defsElement.appendChild(filterElement);
            vSVGElem.appendChild(defsElement);

            var shape = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
                        
           // shape.style.setProperty('filter', 'url(#f1)', null);
            // Set any attributes as desired        
            shape.setAttributeNS(null, "points", "0,110 0,0 230, 0 230, 100 220,110");
            shape.setAttributeNS(null, "fill", "#F1F2F2");
            shape.setAttributeNS(null, "filter", "url(#f1)");
            vSVGElem.id = 'svgSemanticZoomrect';

            vSVGElem.appendChild(shape);

            var zoomedOutTile = document.createElement("div");
            zoomedOutTile.id = 'zoomedOutTile';

            zoomedOutTile.appendChild(vSVGElem);

Initial URL


Initial Description
this is how to instantiate a dropdown shadow using js code, works in IE10 and windows store apps. Important for when you want use templates.

Initial Title
Javascript only drop shadow filter for SVG element

Initial Tags
javascript, filter

Initial Language
JavaScript