禁用点击嵌入式PNG的Alpha通道？

Question

我在D3项目中使用带有Alpha通道的PNG。图像是可点击的。是否有一个SVG属性来指示d3在图像的透明区域上方忽略鼠标？

如果我能用PNG做到这一点，我可以用嵌入式SVG做到吗？

动画显示光标更改为在图像的矩形内。我想将活动区域限制为图像的不透明部分。

在进一步研究之后再添加一些细节：

来自ww3 spec

  

对于光栅图像，可以对整个图像执行命中测试   基础（即图像的矩形区域是其中之一）   图像是否接收事件的决定因素。或a   每像素基础（即指针下像素的alpha值）   帮助确定图像是否收到事件）：

     

值visiblePainted意味着光栅图像可以接收图像边界内任何位置的事件如果有任何像素来自   指针下的光栅图像不是完全透明的，用   “visibility”属性设置为的附加要求   可见。

我尝试将下面的CSS添加到图片元素中，但图片的整个矩形仍然可以点击。

.clickable {
     cursor: pointer;
     pointer-events: visiblePainted;
     visibility: visible;
 }

 e.append("image")
                .attr("x", function (d) {
                    return margin_content.left - (d.iconWidth / 2);
                })
                .attr("y", - d.iconHeight)
                .attr("width", d.iconWidth)
                .attr("height", d.iconHeight)
                .attr("xlink:href", iconImagePath)
                .attr("class", "clickable")
                .on("click", eventClick);