SVG <a>元素无法正常工作

Question

我需要在一个矩形中添加一个链接<a>。我是基于Collapsible Indented Tree示例进行工作的。但是，当我使用内部<text>元素添加<a>元素时，虽然它们被显示出来，但它们不像常规的<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

矩形本身有一个监听器来处理 'click' 事件，这个监听器运行得非常好。

生成的 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，但是锚元素根本不起作用。有人遇到过类似的问题吗？

任何帮助将不胜感激。 谢谢

- sebastianr

Answer 1

我发现了一个问题，这个问题是由可折叠缩进树示例继承而来的。实际上，这不是示例本身的错误，而是一个CSS声明阻止了指针事件的触发。

我发现了以下CSS声明：

.node text {
    font: 12px sans-serif;
    pointer-events: none;  // <- this was preventing the `<a>` element from triggering  events
 }

在删除了pointer-events: none;声明后，锚点元素开始按预期工作。

- sebastianr