SVG映射在Internet Explorer 10中无法正常工作 [英] SVG map not working well in Internet Explorer 10

问题描述

我正在构建SVG地图动画.到目前为止，动画效果还不错，但是我在IE上的SVG解释上遇到了问题.路径上的悬停是以一种奇怪的方式触发的(我认为是在边界框上触发的)，因此，当所有地图都就位时，会有一些路径被完全包围并且无法被触摸.

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.

我只放置了一部分SVG，所以您可以知道我在说什么:

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.

推荐答案

这似乎是IE中的错误.它似乎与边界框无关，因为您可以在不触发翻转的情况下侵入bbox内部.

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.

然后我怀疑这可能与转换有关，因此我创建了以下SVG来测试该理论:

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>

瞧！它按预期工作.

因此，如果您更改SVG来删除转换，而预乘以坐标，则应该发现它然后可以在IE中正常工作.希望您自己生成SVG，因此这很容易. :)

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. :)

这篇关于SVG映射在Internet Explorer 10中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！