使用javascript单击svg元素
我有一个简单的HTML页面，其中包含一个作为对象嵌入的svg图像。我想使用javascript使svg中的元素可以单击 单击svg的特定元素（具有使用javascript单击svg元素,javascript,html,svg,Javascript,Html,Svg,我有一个简单的HTML页面，其中包含一个作为对象嵌入的svg图像。我想使用javascript使svg中的元素可以单击 单击svg的特定元素（具有id='node1'）后，我希望执行函数testFunc 我试图创建一个事件侦听器，但没有成功。该对象似乎没有contentDocument <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8">
id='node1'testFunc<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function testFunc()
{
alert("test")
}
</script>
</head>
<body>
<div style="text-align:center;">
<object type="image/svg+xml" data="graph-test.svg" id="flow">
fallback here
</object>
</div>
<script>
window.addEventListener("load", function() {
var svgObject = document.getElementById('flow').contentDocument;
var node1 = svgObject.getElementById('node1');
node1.addEventListener("click", testFunc)
});
</script>
</body>
</html>
函数testFunc（）
{
警报（“测试”）
}
退后
addEventListener（“加载”，函数（）{
var svgObject=document.getElementById（'flow'）.contentDocument；
var node1=svgObject.getElementById（'node1'）；
node1.addEventListener（“单击”，testFunc）
});
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="407pt" height="360pt"
viewBox="0.00 0.00 406.71 360.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 356)">
<title>%3</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-356 402.7104,-356 402.7104,4 -4,4"/>
<!-- A -->
<g id="node1" class="node">
<title>A</title>
<polygon fill="#666699" stroke="#666699" points="350.0797,-352 130.7514,-352 130.7514,-316 350.0797,-316 350.0797,-352"/>
<text text-anchor="middle" x="240.4155" y="-336.8" font-family="Times,serif" font-size="14.00" fill="#ffffff">It's annoying that you are </text>
<text text-anchor="middle" x="240.4155" y="-322.8" font-family="Times,serif" font-size="14.00" fill="#ffffff"> enduring something that's annoying</text>
</g>
<!-- B -->
<g id="node2" class="node">
<title>B</title>
<polygon fill="#666699" stroke="#666699" points="168.7467,-194 .0844,-194 .0844,-158 168.7467,-158 168.7467,-194"/>
<text text-anchor="middle" x="84.4155" y="-178.8" font-family="Times,serif" font-size="14.00" fill="#ffffff">Did you do something you </text>
<text text-anchor="middle" x="84.4155" y="-164.8" font-family="Times,serif" font-size="14.00" fill="#ffffff"> sohuld not have done?</text>
</g>
<!-- A->B -->
<g id="edge1" class="edge">
<title>A->B</title>
<path fill="none" stroke="#000000" d="M169.3515,-315.8946C140.9836,-304.9901 110.8283,-288.0007 92.7729,-262 81.2401,-245.3921 79.5349,-222.4318 80.5057,-204.4125"/>
<polygon fill="#000000" stroke="#000000" points="84.0144,-204.4538 81.3619,-194.1964 77.0388,-203.8691 84.0144,-204.4538"/>
<text text-anchor="middle" x="153.2368" y="-250.8" font-family="Times,serif" font-size="14.00" fill="#000000">If something == True</text>
</g>
<!-- L -->
<g id="node3" class="node">
<title>L</title>
<polygon fill="#666699" stroke="#666699" points="218.7194,-36 106.1116,-36 106.1116,0 218.7194,0 218.7194,-36"/>
<text text-anchor="middle" x="162.4155" y="-13.8" font-family="Times,serif" font-size="14.00" fill="#ffffff">Are you a human</text>
</g>
<!-- A->L -->
<g id="edge3" class="edge">
<title>A->L</title>
<path fill="none" stroke="#000000" d="M239.9121,-315.702C238.2911,-274.3429 231.5128,-170.9534 203.4155,-90 197.8971,-74.1005 188.8589,-57.6949 180.6709,-44.5669"/>
<polygon fill="#000000" stroke="#000000" points="183.5451,-42.5656 175.1918,-36.0485 177.6578,-46.3523 183.5451,-42.5656"/>
<text text-anchor="middle" x="243.1914" y="-171.8" font-family="Times,serif" font-size="14.00" fill="#000000">False</text>
</g>
<!-- C -->
<g id="node4" class="node">
<title>C</title>
<polygon fill="#666699" stroke="#666699" points="398.5063,-194 306.3248,-194 306.3248,-158 398.5063,-158 398.5063,-194"/>
<text text-anchor="middle" x="352.4155" y="-171.8" font-family="Times,serif" font-size="14.00" fill="#ffffff">Are you a old</text>
</g>
<!-- A->C -->
<g id="edge2" class="edge">
<title>A->C</title>
<path fill="none" stroke="#000000" d="M253.2634,-315.8754C272.9061,-288.1651 310.5217,-235.1002 333.3524,-202.8926"/>
<polygon fill="#000000" stroke="#000000" points="336.4449,-204.5822 339.3726,-194.3999 330.7341,-200.5341 336.4449,-204.5822"/>
<text text-anchor="middle" x="318.4707" y="-250.8" font-family="Times,serif" font-size="14.00" fill="#000000">Dunno</text>
</g>
<!-- B->L -->
<g id="edge4" class="edge">
<title>B->L</title>
<path fill="none" stroke="#000000" d="M93.3631,-157.8754C106.926,-130.4019 132.7926,-78.0054 148.7295,-45.723"/>
<polygon fill="#000000" stroke="#000000" points="152.0437,-46.9161 153.332,-36.3999 145.7669,-43.8174 152.0437,-46.9161"/>
<text text-anchor="middle" x="160.2466" y="-92.8" font-family="Times,serif" font-size="14.00" fill="#000000">MYLABEL</text>
</g>
</g>
</svg>
%3
A.
它'；It’你真讨厌
忍受'；真烦人
B
你做了什么事吗
难道你不该这么做吗？
A-；B
如果某事=真
L
你是人类吗
A-；L
假的
C
你是老人吗
A-；C
不知道
B-；L
迈拉贝尔
var svgObject = document.getElementById('flow').contentDocument.childNodes[1];
var node1 = svgObject.getElementById('node1');
从
文件：//这意味着您将无法访问这些资源的内容
改用本地服务器。将
idgid-“someId”.contentDocumentvar node1 = svgObject.getElementById('node1');