Posted By

Syllogism on 10/16/12

Tagged

Versions (?)

Last Edited at 10/16/12 06:20pm

Statistics

Viewed 1756 times

Favorited by 0 user(s)

Related snippets

Javascript only drop shadow filter for SVG element

/ Published in: JavaScript

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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