SVG 元素 onclick 给出 ReferenceError: function is not defined答案

【问题标题】：SVG element onclick gives ReferenceError: function is not definedSVG 元素 onclick 给出 ReferenceError: function is not defined
【发布时间】：2015-04-03 19:59:00
【问题描述】：

我正在尝试将 onclick 事件添加到 svg 元素。

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

我得到以下错误：“Uncaught ReferenceError: clickCounty is not defined”

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>

【问题讨论】：

标签： svg

【解决方案1】：

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

当通过<object> 标签嵌入它时，它给出了参考错误。不知道为什么会这样......

【讨论】：

【解决方案2】：

你有两个问题

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>

【讨论】：

【解决方案3】：

我用这个，为我工作

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

【讨论】：