我的图像具有悬停效果，但是上面有一个文本，它可以避免它

Question

我试图将文本放在图像的顶部，但是如果我将光标传递到文本上，则我的图像不会被动画。我该怎么做，即使光标在文本上，即使图像是动画的，也要尝试表现得好像文本不存在。

如何做？

    const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);

    var widthMarker=50;
    var imgContainer = svg.append("g")
      .attr("transform", "translate(228,53)");
    var img = imgContainer.append("svg:image")
    .attr("xlink:href", "marker.svg")
    .attr("width", widthMarker)
    .attr("height", widthMarker)
    .attr("x", 228)
    .attr("y", 50)
    .on('mouseover', function() {
      d3.select(this)
        .transition()
        .ease("bounce")
        .duration(500)
        .attr("height", widthMarker + 50)
        .attr("y", 17);
    })
    .on('mouseout', function() {
      d3.select(this)
        .transition()
        .ease("bounce")
        .duration(500)
        .attr("height", widthMarker)
        .attr("y", 50);
    })
    var text = imgContainer.append("svg:text")
      .attr("dy", widthMarker/2)
      .text("hello world");
    text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2)
      .attr("transform", "translate(228,53)");

http://plnkr.co/edit/mfnlzizcjjjxfbwfx3t4w?p=peview

Answer 1

您可以使用pointer-events: none

text.attr("pointer-events", "none");