Question

这是我写的代码：

<?xml version="1.0" standalone="no"?>

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

    <circle cx="50" cy="50" r="50" id="cir" fill="green" onclick="showFrame()"/>

    <script xlink:href="jQuery.js" language="JavaScript"></script>

    <script type="text/ecmascript"><![CDATA[

        function showFrame() {
            alert($("#cir"));
        }
    ]]></script>
</svg>

如果jquery可以工作，我可以看到警报，但什么都没有。

我写错的地方？

Answer 1

一旦我从CDN中包含jQuery库，它就适用于我。

您确定jQuery.js是否存在于正确的目录中？

<?xml version="1.0" standalone="no"?>

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

    <circle cx="50" cy="50" r="50" id="cir" fill="green" onclick="showFrame()"/>

    <script xlink:href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/ecmascript"><![CDATA[

        function showFrame() {
            alert($("#cir"));
        }
    ]]></script>
</svg>

Answer 2

在我看来，这不是你想要做的。将JS逻辑与SVG混合使用。你不会用HTML和JS做到这一点（至少你不应该这样做）

<?xml version="1.0" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100" height="100">
    <circle cx="50" cy="50" r="50" id="cir" fill="green" onclick="showFrame()"/>
</svg>

然后就像你在HTML中的某个地方那样做常规

<body>
...
<script>
   $("#cir").on("click", function(){alert($("#cir");});
</script>
</body>

如何在SVG中使用JQuery？

2 个答案: