2012-12-27 117 views
2

我想在Internet Explorer 9上使用jQuery与内联SVG。这是非常基本的东西,但我似乎无法得到它的工作。我想要做的就是使用jQuery在单击矩形时“提醒”。下面是我试过的代码:SVG,jQuery和Internet Explorer

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

<script type="text/ecmascript" xlink:href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" /> 
<script type="text/ecmascript"><![CDATA[ 
    $(document).ready(function(){ 
     $("#bot").click(function(){ 
      alert("clicked"); 
     }); 
    }); 
]]></script> 

<rect x="10" y="10" height="300" width="300" style="fill: #000000" id="bot" /> 

</svg> 

<!-- 
<script type="text/javascript" href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" /> 
<script type="text/javascript"><![CDATA[ 
$(document).ready(function(){ 
    $("#bot").click(function(){ 
     alert("clicked"); 
    }); 
}); 
]]></script> 
--> 

我可以在矩形上点击尽可能多,但没有任何反应。有谁知道为什么以及如何在Internet Explorer 9中修复它(在Firefox中工作正常),只使用普通的jQuery而没有其他库?

正如你所看到的,我已经尝试将JS部件放在SVG标签的内部和外部,看看是否有任何影响。它没!

+0

要注意的是,上面的示例在Chrome 23中也不起作用。 –

回答

1

而不是<script/>,使用<script></script>

工作示例(在IE9和Chrome 23测试):

http://jsfiddle.net/LrKbS/6/

根据SVG规范,使用<script/>是正确的,但在HTML5规范与外国内容有a bug(最近固定)处理和脚本结束标记处理。

+0

完美的辉煌作品。不知道为什么,但它只会工作,如果我在文档的顶部添加svg dtd。这不是Firefox需要的 –