javascript - 从 SVG 对象检索信息

标签 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 元素,该元素知道被单击的元素有哪些文本,即“saccsip.o”。我们尝试过类似的事情

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

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

最佳答案

我有一段代码可以提供我在 svg 中单击的 DOM 元素:

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

    });

所以我猜是这样的:

e.target.firstChild

应该给你文字

关于javascript - 从 SVG 对象检索信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24775114/

相关文章:

javascript - 图表在非 IE 浏览器中显示在同一行,但在 IE 浏览器中显示在下一行

CSS变换源问题

html - 如何用基于字体的图标(Font Awesome/Ion)替换 SVG 图标?

javascript - 如何使用 dojo 按定义的顺序加载非 AMD 依赖项?

javascript - 未定义的函数

javascript - Angularjs:$window.history.go 在 iOS 中不工作

html - 信息框内溢出 :hidden container should be visible outside

java - 如何在运行时创建/更新/加载 HTML 文件

javascript - 如何使用VueJS突出显示列表中的项目

javascript - 将 url 链接添加到轮播文本