是否可以使用Javascript动态修改作为资源加载的SVG？

Question

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?

Answer 1

What if you use jquery addclass and simply link to another svg that has your changes?

You can also create an svg element with html code (right click on file --> view with notepad) and you will have the code there -- there are online converters that can make all neccessary tweaks and then you can enter the svg code with javascript

Answer 2

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 ie 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.

Answer 3

I don't know how to do it in the way you show... as a background image... but if you can load the svg file inside a div as in this example you can you can use my importer (a modified version of others importers founded on github) that it's here: http://www.dariomac.com/Document/Raphael-Utils . You can also see this storify where I describe all the steps followed by me to import SVG directly from file.

Answer 4

No, it's not directly possible. A workaround if you need this would be to use inline svg in html, or reference the svg files with either <object>, <iframe> or <embed>.

An example of using inline svg and a filter effect on hover here . The svg part looks like this essentially:

<svg width="400" height="400" viewBox="-2 -2 36 32">
  <defs>
    <style>
      #stack polygon:hover { filter: url(#glow); }
    </style>
    <filter id="glow">
        <feMorphology radius="0.7"/>
        <feGaussianBlur stdDeviation="1"/>
        <feColorMatrix type="matrix"
         values="0 0 0 0   0
                 0 0 0 0.9 0
                 0 0 0 0.9 0
                 0 0 0 1   0"/>
    </filter>
  </defs>
  <g id="stack" class="icon" fill="#850508">
    <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/>
    <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/>
    <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/>
  </g>
</svg>