爲什麼我的svg的嵌入式JavaScript不能在HTML文檔中工作？

我有一個SVG下面的代碼：爲什麼我的svg的嵌入式JavaScript不能在HTML文檔中工作？

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="470px" height="260px" version="1.1" onload="addEvents()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> 
    <image xlink:href="baby.jpg" x="0" y="0" height="260px" width="470px"> 
    </image> 
    <g transform="translate(100,50)"> 
     <circle class="circle" id="tip1" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" /> 
     <g transform="translate(10,15)"> 
     <polygon class="baby-tip tip1 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" /> 
     </g> 
     <rect class="baby-tip tip1" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/> 
    <text class="baby-tip tip1" x="10" y="45">Here is a whole bunch of text.</text> 
    <text class="baby-tip tip1" x="10" y="60">Clearly this should wrap, but it</text> 
    <text class="baby-tip tip1" x="10" y="75">doesn't. What will we do?</text> 
    </g> 
    <g transform="translate(150,160)"> 
     <circle class="circle" id="tip2" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" /> 
     <g transform="translate(10,15)"> 
     <polygon class="baby-tip tip2 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" /> 
     </g> 
     <rect class="baby-tip tip2" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/> 
    <text class="baby-tip tip2" x="10" y="45">Here is a whole bunch of text.</text> 
    <text class="baby-tip tip2" x="10" y="60">Clearly this should wrap, but it</text> 
    <text class="baby-tip tip2" x="10" y="75">doesn't. What will we do?</text> 
    </g> 
    <style> 
    .baby-tip { 
    font-size: 14px; 
    font-family: "MuseoSans100", Arial, Helvetica, sans-serif; 
    fill: white; 
    opacity: 0; 
    } 
    </style> 
<script> 

    var log = console.info; 
    function addEvents() { 
     var dots = document.getElementsByClassName("circle"); 

     var i = dots.length; 
     while(i--) { 
      toggleTips(dots[i]); 
     } 
} 
function closeOtherTips(otherTips) { 
    var l = otherTips.length; 
    while (l--) { 
     otherTips[l].style.opacity = 0; 
    } 
} 
    function toggleTips(dot, l) { 

     window.dot = dot; 
     dot.addEventListener("click", function() { 
      var className = dot.id; 
      var tips = document.getElementsByClassName(className); 
      var otherTips = document.querySelectorAll('text:not(.' + className + '), rect:not(.' + className + '), polygon:not(.' + className + ')'); 
      var t = tips.length; 
      closeOtherTips(otherTips); 
      while (t--) { 
      tips[t].style.opacity != 0 ? tips[t].style.opacity = 0 : tips[t].style.opacity = 1; 
     } 
     }); 
    } 
    </script> 


</svg>

當我保存這個內容test.svg，並查看它在瀏覽器中，它運行美麗 - 我應該看到兩個紫色的圓點，當我點擊每一個我得到一個小工具提示，並且一次只顯示一個。

但是，如果我創建以下的HTML文檔：

<!DOCTYPE html> 
<html> 
<body> 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<img class="baby-dot-svg" src="test.svg" /> 
<img class="baby-dot-bg" src="baby.jpg" /> 
</body> 
</html>

兩件事情改變： 1）提示/所有的JS功能喪失 - 當我點擊了點什麼也沒有發生。 2）baby.jpg的鏈接不再有效 - 儘管baby.jpg和svg駐留在同一目錄中，但svg的背景爲空白。

請參閱http://images.agoramedia.com/wte3.0/gcms/web_view_svg_test2.html以查看此操作。

這是爲什麼破壞？

來源

2015-02-09 Meg Doxy

有多種嵌入SVG文件的方法，但<img>方法不允許它是交互式的。

嘗試：

<object data="test.svg" type="image/svg+xml"> 
    <img src="baby.jpg" /> 
</object>

欲瞭解更多信息，see this answer.

來源

2015-02-09 20:28:12

爲什麼我的svg的嵌入式JavaScript不能在HTML文檔中工作？

回答

相關問題