从SVG对象检索信息

时间:2014-07-16 07:50:33

标签: javascript html svg dot

我们有一个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元素,该元素知道被点击的元素有哪些文本,即&#34; saccsip.o&#34;。我们尝试过像

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

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

3 个答案:

答案 0 :(得分:1)

我有一个代码,它在svg:

中点击了我点击的DOM元素
    svgDOM.addEventListener('click', function(e){
        console.log(e.target);

    });

所以我猜是这样的:

e.target.firstChild

应该给你文字

答案 1 :(得分:0)

jQuery solution-ish:

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

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

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

答案 2 :(得分:0)

我不完全确定你做错了什么,因为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,因为它会显示您正在记录的任何元素上的所有可用属性,而不是元素本身。 &#34;缺点&#34;但是,您还会看到许多特定于浏览器的怪癖和属性,因此之后检查文档仍然很有价值。例如,有几个浏览器支持.innerText,但这不是标准化的。