svg <a> элемент не работает

Question

Мне нужно добавить ссылку <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, но опять же, элемент анкер не работает вообще. Кто-нибудь сталкивался с чем-то подобным раньше?

Любая помощь будет оценена по достоинству. Thanks

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; декларации анкерные элементы начали работать, как ожидалось.