用javascript点击svg元素
[英]click on svg element with javascript
问题描述
我有一个简单的 HTML 页面，其中包含一个嵌入为对象的 svg 图像。 我想使用 javascript 使该 svg 中的元素可点击。
单击 svg 的特定元素（具有id='node1' ）后，我想执行函数testFunc
我试图创建一个事件侦听器，但没有运气。 该对象似乎没有 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>
这是 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;
返回一个XMLDocument ，它是 svg 文档的根。 不幸的是，我们在它的层次结构中还不够深入。 我们对它的孩子感兴趣。 如果您添加一个.childNodes，您将获得NodesList - 或多或少是一个包含两个元素的数组 - 而我们对第二个感兴趣，因为它包含您的实际 svg 数据。 我们可以使用以下方法访问它：
var svgObject = document.getElementById('flow').contentDocument.childNodes[1];
好了，就是这样 - 现在您可以使用以下方法获得对所需 svg 组的引用：
var node1 = svgObject.getElementById('node1');
解决方案2
0
从file://协议提供的资源被认为是跨源的。
这意味着您将无法访问这些资源的内容。
请改用本地服务器。
Javascript 单击 Svg/object 元素不会在移动设备上触发
[英]Javascript Click on Svg/object element dosen't trigger with mobile
如何在JavaScript中调用点击功能，例如ng-click circle（SVG元素）
[英]How to call on click functionality like ng-click on circle(SVG element) in javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.