用javascript点击svg元素
[英]click on svg element with javascript
问题描述
I have a simple HTML page which contains an svg image embedded as an object.
我有一个简单的 HTML 页面，其中包含一个嵌入为对象的 svg 图像。 I would like to use javascript to make elements from within that svg clickable.我想使用 javascript 使该 svg 中的元素可点击。
Upon clicking on a particular element of the svg (which has id='node1' ) I would like to execute the function testFunc单击 svg 的特定元素（具有id='node1' ）后，我想执行函数testFunc
I tried to create an event listener but to no luck.我试图创建一个事件侦听器，但没有运气。 There doesn't seem to be a contentDocument for the object.该对象似乎没有 contentDocument。
<!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>
Here's the svg这是 svg
<?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>
2 个解决方案
解决方案1
0 2019-12-04 01:34:50
var svgObject = document.getElementById('flow').contentDocument;
returns an XMLDocument which is the root of your svg document.返回一个XMLDocument ，它是 svg 文档的根。 Unfortunately we aren't deep enough in it's hierarchy yet.不幸的是，我们在它的层次结构中还不够深入。 We're interested in it's children.我们对它的孩子感兴趣。 If you add a .childNodes you'll get NodesList - more or less an array - which contains two elements - whereas we're interested in the second one because it contains your actual svg data.如果您添加一个.childNodes，您将获得NodesList - 或多或少是一个包含两个元素的数组 - 而我们对第二个感兴趣，因为它包含您的实际 svg 数据。 We can access it using:我们可以使用以下方法访问它：
var svgObject = document.getElementById('flow').contentDocument.childNodes[1];
Well that's it - now you can get a reference to your desired svg group using:好了，就是这样 - 现在您可以使用以下方法获得对所需 svg 组的引用：
var node1 = svgObject.getElementById('node1');
解决方案2
0
Resources served from the file:// protocol are considered Cross-Origin.从file://协议提供的资源被认为是跨源的。
This means you won't be able to access the content of these resources.这意味着您将无法访问这些资源的内容。
Use a local server instead.请改用本地服务器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.