Question

我试图将一个onclick事件添加到svg元素。

所以我在下面的特定元素中添加了一个onclick属性。但它似乎没有起作用。

我得到以下错误：＆＃34;未捕获的ReferenceError：clickCounty未定义＆＃34;

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
                function clickCounty(e)
                {
                    console.log("clickCounty");
                }
            });
        </script>
    </head>
    <body>
        <div id="canvas">
            <object data="custom.svg" type="image/svg+xml">
        </div>
    </body>
</html>

custom.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">
<rect onclick="clickCounty('test')" x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>

Answer 1

你有两个问题

a）你的脚本的语法是错误的，你最后在自己的行上有一个无关的});

   <script>
            function clickCounty(e)
            {
                console.log("clickCounty");
            }
    </script>

b）你需要window.top或window.parent来访问svg文档中html文档中定义的方法，例如

<?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">
<rect onclick="window.parent.clickCounty('test')" x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>

Answer 2

通过在标记中包含SVG内容/元素来解决这个问题。

通过<object>标记嵌入时，会产生参考错误。不知道为什么会发生这种情况....

Answer 3

我用这个，为我工作

 <svg ...
       (click)="testClick(point)"
 >
   ....
 </svg>

SVG元素onclick给出了ReferenceError：函数未定义

3 个答案: