Internet Explorer 10에서 SVG 맵이 제대로 작동하지 않습니다.

Question

SVG 맵 애니메이션을 제작 중입니다. 지금까지는 애니메이션이 OK 이상 이었지만 IE의 SVG 해석에 문제가 있습니다. 호버는 이상한 방법으로 트리거됩니다 (경계 상자에서 트리거되는 것 같습니다). 모든 맵이 제 위치에있을 때 일부 경로가 있습니다. 경로는 완전히 둘러싸여있어 만질 수 없습니다. 나는 SVG의 단지 조각을 배치하고

당신은 지금 무엇을 말 하려는지 알고 모시 있도록 :

<?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> 

포인터 이벤트는이에 영향을주지 않습니다.

도움이나 조언을 환영합니다. 미리 감사드립니다.

Answer 1

IE의 버그 인 것 같습니다. 롤오버를 발생시키지 않고 장소에서 bbox를 침범 할 수 있기 때문에 경계 상자와 관련이없는 것처럼 보입니다.

처음에는 베 지어 제어점을 경계 다각형으로 사용할 수 있다고 생각했지만 모든 곡선을 선으로 변환하면 여전히 발생했습니다.

그때 나는 변환 함께 할 수있는 뭔가가 될 수 있음을 의심, 그래서 나는이 이론 테스트하기 위해 다음과 같은 SVG를 생성 :

<?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를 쉽게 생성 할 수 있기를 바랍니다. :)

Answer 2

http://jsfiddle.net/3591mj2o/18/

작업 규모와 SVG이 예-바이올린의 JS에 의해

<svg height="1000" width="1500"> 
    <path id="path1" transform="translate(0,0)scale(1000)" d="M7.5 0 L0 20 L15 20 Z" /> 
</svg> 

IE 버그 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> 

이가는 변환,는 제거 할 필요가 없습니다 것 같다 이 IE 문제를 해결하려면 코드를 변환하십시오. 좌표 값이 충분히 크면 (내 경험상 1보다 큰 경우) 마우스 오버가 올바르게 작동합니다.

변환 속성을 제거 할 필요가 없습니다.

물론이 해결 방법으로 인해 SVG의 크기가 변경되지 않도록하려면 배율을 배수 한 것과 동일한 인수로 나누어야합니다.