CODEWITHSUNDEEP
javascriptsvgdom-events
Alejandro
Alejandro

Reputation: 573

Can't add listener to a SVG in Internet Explorer using SVGweb

This code works great in Firefox, but not in IE. I've read the documentation of SVGWeb (http://svgweb.googlecode.com/svn/trunk/docs/UserManual.html), but I don't find/understand the solution, any idea?

window.onsvgload = function() {
  carga();
var mySVG = document.getElementById("mySVGObject").contentDocument;
        mySVG.addEventListener('click', function(evt) {
                alert(evt.target.id);
    }, false);
}

I'm using things like this in IE without problems:

mySVG.getElementById('Color2').style.fill='#00cc00'

with that code I can change colors and texts in the shape, but I cannot make the listener work in IE.

Edit: this works in Chrome, Firefox and IE9, I need it to work on IE7. This is how I load the SVG object:

 <div style="text-align:center" id="mapaSvg" >
<!--[if !IE]>-->
 <object data="ca.svg" type="image/svg+xml"
      width="700" height="800" id="mySVGObject" > <!--<![endif]-->
<!--[if lt IE 9]>
<object src="ca.svg" classid="image/svg+xml"
      width="700" height="800" id="mySVGObject" > <![endif]-->
<!--[if gte IE 9]>
<object data="ca.svg" type="image/svg+xml"
      width="700" height="800" id="mySVGObject" > <![endif]-->
</object>
</div>
<div style="text-align:center">

The IE development tools show the error:

"Error while firing onload: Not supported"

On the line:

mySVG.addEventListener('click', function(evt) {
                alert(evt.target.id);
    }, false);

Here you can see an example of SVGWEB working in IE, Firefox, Chrome on mouse over of dynamic lines: https://www.destatis.de/bevoelkerungspyramide/

Upvotes: 4

Views: 919

Answers (2)

XiM
XiM

Reputation: 396

Try to call addEventListener inside this block instead onsvgload:

window.addEventListener('SVGLoad', function() {
   // all SVG loaded and rendered
}, false)

These constructions are equal but I make this assumption because of an error: "Error while firing onload: Not supported"

Upvotes: 1

Hoppy
Hoppy

Reputation: 1

Don't know if it helps but I had much the same problem with it working in every browser except IE8 and IE7. The problem was caused by using a self closing image element <image/> instead of <image></image> in the svg.

Upvotes: 0

Related Questions