Home/ Questions/Q 8546371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:00:14+00:00

I have these icons and I’d like to procedurally add a drop shadow (basically,

  • 0

I have these icons and I’d like to procedurally add a drop shadow (basically, something, anything) to them on hover so they don’t look so hokey.

They are SVG’s so in theory I can prepend something like this: 

<filter id="f1" x="0" y="0" width="200%" height="200%">
  <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
  <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
  <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

and some javascript magic to apply it on mouse over. This could possibly save ages of design work.

Problem is, the svg’s are presented as <a style='background-image:url(icon.svg)' />.

Is there a way to get into the SVG element?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re using SVG as an image then you can’t get to the image’s DOM and manipulate it via javascript.

    While you could load them using XMLHTTPRequest and then insert them into the main document as inline data using the DOMParser object, this exposes you to the security issues that the browsers are trying to protect you from by locking down image access i.e. the image could change and you may be loading arbitrary javascript into your page.

    What would seem simplest and safest to me is if you just alter the image files directly using an editor and add the filter into them then use the modified images.

    • 0