从 SVG 对象中检索信息

Question

我们有一个 SVG 图，其节点定义如下：

<!-- sac -->
<g id="node37" class="node"><title>sac</title>
<polygon fill="none" stroke="black" points="692.5,-952 692.5,-1004 765.5,-1004 765.5,-952 692.5,-952"/>
<text text-anchor="middle" x="729" y="-987.4" font-family="Times Roman,serif" font-size="14.00">sac</text>
<polyline fill="none" stroke="black" points="692.5,-978 765.5,-978 "/>
<text text-anchor="middle" x="729" y="-961.4" font-family="Times Roman,serif" font-size="14.00">sacsip.o</text>
</g>

我希望能够添加 onclick 元素，该元素知道被点击的元素具有什么文本，即“saccsip.o”。我们尝试过类似

 <script>
 function whichElement(event){
    var tname
    tname= event.target
    alert("You clicked on " + tname)
 }
 </script>

但它只会返回元素，而不是文本本身。如果元素是 HTML，我们可以检索信息，但使用 SVG 时我们没有成功。可能吗？有没有其他办法？

Answer 1

我有那个代码，它给出了我在 svg 中单击的 DOM 元素：

    svgDOM.addEventListener('click', function(e){
        console.log(e.target);

    });

所以我猜是这样的：

e.target.firstChild

应该给你文字

Answer 2

jQuery 解决方案-ish：

$('#node37').on('click', 'text', function(event)
{
   console.log('You clicked on ' + $(this).text()); 
});

这应该攻击 g-node 中每个文本节点的实时事件侦听器，其 id 为 node37。

如果您想要纯 JavaScript 解决方案；我认为 tname.nodeValue 可能会返回实际值。

Answer 3

我不完全确定你做错了什么，因为ev.target 应该确实有效。

document.querySelector("svg").addEventListener("click",function(ev){
    var theElement = ev.target;
    //Show something nice: if we have textContent, show it,
    // otherwise just show the class.
    alert(theElement.textContent.length ? theElement.textContent : theElement.classList[0]);
});

如果您查看此functional JSFiddle 并使用您自己的 SVG，也许会有所帮助。此外，我可以想象像 IE 这样的旧浏览器可能会以不同的方式处理 SVG，因此如果您可以共享您正在使用的浏览器，这将很有用。

如果您的问题确实是获取节点的内容，您可以使用.textContent 属性。找出这类事情的一个有用方法是使用console.dir 而不是console.log，因为它会显示您正在记录的任何元素上的所有可用属性，而不是元素本身。然而，“缺点”是您还会看到许多特定于浏览器的怪癖和属性，因此事后检查文档仍然很有价值。例如，一些浏览器支持.innerText，但它并不标准化。