Posted By

Syllogism on 10/16/12

Tagged

Versions (?)

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

Statistics

Viewed 501 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.

Highlighted TextExpand

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.