SVG map not working well in Internet Explorer 10

问题:

I am building an SVG map animation. So far so good, the animation is more than Ok, but I have problems with the SVG interpretation on IE. The hover on path is triggered in a strange way (i think that is triggered on the bounding box), so when all the map is in place there are some paths, that are completely surrounded and just can not be touched.

I am placing just a piece of the SVG so you cand know what i am talking about :

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  
    width="69.279999"
    height="105.34"
    viewBox="0 0 230.93362 351.1338">
  <style
     id="style3001">path { fill : blue } path:hover { fill : green }</style>
  <g
     transform="matrix(111.33376,0,0,116.46504,-16701.937,-16253.569)"
     id="g3003">
    <path       
       d="m 150.758,142.099 c -0.0517,0.0423 -0.10333,0.0847 -0.155,0.127 -0.0323,-0.0115 -0.0717,-0.0136 -0.0999,-0.0307 -0.024,-0.0436 -0.0573,-0.0849 -0.0756,-0.12979 0.009,-0.0523 0.003,-0.10875 0.0208,-0.15836 0.0344,-0.0743 0.0761,-0.14613 0.10581,-0.22198 0.005,-0.0414 0.0282,-0.0843 0.004,-0.12357 -0.0307,-0.0869 -0.0614,-0.17373 -0.0921,-0.2606 0.0173,-0.067 0.0347,-0.134 0.052,-0.201 -0.0558,-0.0445 -0.11683,-0.0847 -0.16951,-0.13191 -0.0118,-0.0328 -0.0427,-0.0635 -0.0418,-0.0978 0.0191,-0.0675 0.0299,-0.13837 0.054,-0.20374 0.0808,-0.13386 0.16153,-0.26771 0.2423,-0.40156 -0.0333,-0.0593 -0.0667,-0.11867 -0.1,-0.178 0.0429,-0.0125 0.0967,-0.004 0.12461,-0.045 0.0491,-0.048 0.0983,-0.096 0.14739,-0.14402 0.10933,0.15967 0.21867,0.31933 0.328,0.479 0.0641,0.0366 0.12439,0.0825 0.19078,0.11335 0.0454,0.01 0.0908,0.0198 0.13622,0.0297 0.0407,0.097 0.0813,0.194 0.122,0.291 -0.0197,0.10233 -0.0393,0.20467 -0.059,0.307 0.0963,0.072 0.19267,0.144 0.289,0.216 -0.0939,0.1481 -0.18414,0.29937 -0.28027,0.44549 -0.0662,0.0542 -0.13249,0.10834 -0.19873,0.16251 -0.0375,-0.003 -0.0637,-0.0198 -0.0742,-0.0569 -0.0264,-0.0418 -0.0373,-0.0973 -0.0859,-0.11945 -0.0274,-0.0195 -0.053,-0.0458 -0.0893,-0.0325 -0.0908,0.008 -0.18169,0.0152 -0.27253,0.0228 -0.0281,0.0458 -0.0638,0.0891 -0.0873,0.13651 -0.0128,0.0393 0.008,0.0627 0.0419,0.08 0.0366,0.0157 0.0475,0.0416 0.0314,0.0783 -0.003,0.0161 -0.006,0.0321 -0.009,0.0482 z"
    />
    </g>
</svg>

Pointer events has no effect on this.

Any help or advice is welcomed. Thanks in advance.

回答1:

This seems to be a bug in IE. It doesn't appear to be bounding box related, because you can encroach inside the bbox in places without triggering the roll-over.

At first I suspected that it might be using the bezier control points as a bounding polygon, but when I converted all the curves to lines, it was still happening.

Then I suspected that it might be something to do with the transform, so I created the following SVG to test this theory:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <style id="style3001">path { fill : blue; stroke-width: 0 } path:hover { fill : green }</style>
  <g>
    <path d="m 50,0 c 25,0 50,25 50,50 l 0,50 l -50,-25 l -50,25 l 0,-100 z" />
  </g>
</svg>

and voila! It works as expected.

So if you change your SVG to remove the transforms and instead pre-multiply your coords, you should find that it then works properly in IE. Hopefully you are generating the SVG yourself so this will be easy. :)

回答2:

Going by http://jsfiddle.net/3591mj2o/18/, it seems it's not necessary to remove the transform code to workaround this IE issue. As long as the coordinate values are big enough (in my experience, greater than 1), mouse-over will behave correctly.

Of course, in order to make the SVG not change size because of this workaround, the scale will need to be divided by the same factor the co-ordinates were multiplied by.

<!--IE Bug SVG-->
<svg height="200" width="150">
    <path id="path2" transform="translate(0,0)scale(1000)" d="M0.075 0 L0 0.2 L0.15 0.2 Z" />
</svg>

<!--Working SVG with scale and transform -->
<svg height="200" width="150">
    <path id="path1" transform="translate(0,0)scale(10)" d="M7.5 0 L0 20 L15 20 Z" />
</svg>