javascript - SVG、jQuery 和 Internet Explorer

Question

我正在尝试在 Internet Explorer 9 上将 jQuery 与内联 SVG 结合使用。这是非常基本的东西，但我似乎无法让它工作。我想做的就是在单击矩形时使用 jQuery 来“提醒”。下面是我试过的代码:

<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 标记的内部和外部，以查看是否有任何效果。它没有!

Answer 1

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

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

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

根据 SVG 规范，使用 <script/>是正确的，但是有 a bug (最近已修复)在 HTML5 规范中具有外部内容处理和脚本结束标记处理。