svg <a> 요소가 작동하지 않습니다.

사각형 내에서 <a> 링크를 추가해야합니다. 내 작품을 Collapsible Indented Tree example에두고 있습니다. 그러나 요소가있는 <a> 요소를 내부에 추가하면 해당 요소가 표시되지만 일반 <a> 요소처럼 동작하지 않으므로 커서가 포인터로 변경되지 않고 클릭이 전혀 수행되지 않습니다.svg <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 그러나 다시, 앵커 요소가 전혀 작동하지 않는 것 같습니다. 누구도 전에 이런 걸 겪었나요?

도움을 주시면 감사하겠습니다. 감사합니다.

출처

2013-06-07 sebastianr

예제 축소 가능 들여 쓰기 트리에서 상속 한 문제점을 발견했습니다. 실제로 그것은 예제 그 자체의 버그가 아니라 포인터 이벤트가 트리거되지 않도록하는 CSS 선언입니다. pointer-events: none; 선언 앵커 요소가 예상대로 작동하기 시작했다 제거한 후

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

나는 다음과 같은 CSS 선언을 발견했다.

출처

2013-06-07 23:15:19 sebastianr

svg <a> 요소가 작동하지 않습니다.

답변

관련 문제