Javascript only drop shadow filter for SVG element


/ Published in: JavaScript
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  1. // create svg container
  2. var vSVGElem = document.createElementNS('http://www.w3.org/2000/svg', "svg:svg");
  3. vSVGElem.setAttributeNS(null, "x", 0);
  4. vSVGElem.setAttributeNS(null, "y", 0);
  5. vSVGElem.setAttributeNS(null, "width", '230px');
  6. vSVGElem.setAttributeNS(null, "height", '110px');
  7. vSVGElem.setAttributeNS(null, "viewBox", '0 0 230 110');
  8. vSVGElem.setAttributeNS(null, "enable-background", 'new 0 0 230 110');
  9.  
  10. // defs elements contains filter
  11. var defsElement = document.createElementNS('http://www.w3.org/2000/svg', "defs");
  12. var filterElement = document.createElementNS('http://www.w3.org/2000/svg', "filter");
  13. filterElement.setAttributeNS(null, "id", "f1");
  14. filterElement.setAttributeNS(null, "x", "-10%");
  15. filterElement.setAttributeNS(null, "y", "-10%");
  16. filterElement.setAttributeNS(null, "width", "200%");
  17. filterElement.setAttributeNS(null, "height", "200%");
  18.  
  19. // 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
  20. var feOffset = document.createElementNS('http://www.w3.org/2000/svg', "feOffset");
  21. feOffset.setAttributeNS(null, "result", "offOut");
  22. feOffset.setAttributeNS(null, "in", "SourceAlpha");
  23. feOffset.setAttributeNS(null, "dx", "0");
  24. feOffset.setAttributeNS(null, "dy", "0");
  25.  
  26. // now we blur the 'result'
  27. var feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', "feGaussianBlur");
  28. feGaussianBlur.setAttributeNS(null, "result", "blurOut");
  29. feGaussianBlur.setAttributeNS(null, "in", "offOut");
  30. feGaussianBlur.setAttributeNS(null, "stdDeviation", "2");
  31.  
  32. var feBlend = document.createElementNS('http://www.w3.org/2000/svg', "feBlend");
  33. feBlend.setAttributeNS(null, "in", "SourceGraphic");
  34. feBlend.setAttributeNS(null, "in2", "blurOut");
  35. feBlend.setAttributeNS(null, "mode", "normal");
  36.  
  37. filterElement.appendChild(feOffset);
  38. filterElement.appendChild(feGaussianBlur);
  39. filterElement.appendChild(feBlend);
  40. defsElement.appendChild(filterElement);
  41. vSVGElem.appendChild(defsElement);
  42.  
  43. var shape = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  44.  
  45. // shape.style.setProperty('filter', 'url(#f1)', null);
  46. // Set any attributes as desired
  47. shape.setAttributeNS(null, "points", "0,110 0,0 230, 0 230, 100 220,110");
  48. shape.setAttributeNS(null, "fill", "#F1F2F2");
  49. shape.setAttributeNS(null, "filter", "url(#f1)");
  50. vSVGElem.id = 'svgSemanticZoomrect';
  51.  
  52. vSVGElem.appendChild(shape);
  53.  
  54. var zoomedOutTile = document.createElement("div");
  55. zoomedOutTile.id = 'zoomedOutTile';
  56.  
  57. zoomedOutTile.appendChild(vSVGElem);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.