我需要添加一个链接 <a>
在一个长方形里面。我的工作基于 Collapsible Indented Tree example .但是,当我添加 <a>
元素与内部 <text>
元素,尽管它们确实显示了,但它们的行为与常规 <a>
不同。元素表示光标不会变为指针并且单击根本不执行任何操作。以下是我为实现此目的添加的代码:
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.style("opacity", 1e-6);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click);
nodeEnter.append("svg:text")
.attr("dy", 3.5)
.attr("dx", 5.5)
.text(function(d) { return d.code + ' - ' + d.name; });
//THIS IS THE CODE I ADDED
var $a = nodeEnter.append("svg:a")
.attr("xlink:href", function(d){
return 'http://www.mysite.com?q=' + d.id;
}).attr("target", "_blank");
$a.append("svg:text")
.attr("x", 200).attr("y", 5.5)
.text(function(d) { return 'Ver Detalles' });
//HERE ENDS THE CODE I ADDED
矩形本身有一个“点击”事件的监听器,它工作得很好。
生成的 SVG 是:
<g class="node" transform="translate(57.14285659790039,175)" style="opacity: 1;">
<rect y="-12.5" height="25" width="768" style="fill: #ffffff;"></rect>
<text dy="3.5" dx="5.5">Hello World</text>
<a xlink:href="http://www.mysite.com?q=8" target="_blank">
<text x="200" y="5.5">Click Me</text>
</a>
</g>
显然,这看起来像有效的 SVG,但同样, anchor 元素根本不起作用。以前有人遇到过这样的事情吗?
如有任何帮助,我们将不胜感激。 谢谢
最佳答案
我发现了可折叠缩进树示例继承的问题。实际上,这不是示例本身的错误,而是阻止指针事件触发的 css 声明。
我找到了以下 CSS 声明:
.node text {
font: 12px sans-serif;
pointer-events: none; // <- this was preventing the `<a>` element from triggering events
}
删除 pointer-events: none;
声明后 anchor 元素开始按预期工作。
关于html - svg <a> 元素不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16991685/