Css 如何显示可缩放SVG矩形内SVG元素的工具提示？

我有一个可缩放的SVG矩形，其中包含一行较小的矩形。我想为这些较小的矩形显示工具提示，但由于以下可缩放矩形的代码，我无法将鼠标悬停在较小的矩形上以显示工具提示：

svg.append("rect")
          .attr("width", width)
          .attr("height", height)
          .style("fill", "none")
          .style("pointer-events", "all")
          .call(d3.zoom()
             .scaleExtent([1 / 8, 4])
               .on("zoom", zoomed));

如何在较小的矩形上执行鼠标悬停或悬停事件，同时保持缩放行为不变？是否需要更改指针事件属性

---

备注：缩放最终用于正确查看较小矩形内的文本。因此，我决定将它们放在一个较大的矩形中，并对外部矩形中的所有内容执行缩放。

较大的矩形从较小的矩形中窃取事件。尝试将缩放行为附加到SVG

函数放大{ g、 attr'transform'，d3.event.transform； } var svg=d3.selectdiv.appendsvg .宽度，800 .身高500； var g=svg.appendg； var zoomBehavior=d3.zoom .scaleExtent[1/8,4] .onzoom，缩放； svg.callzoomBehavior； var largeRect=g.appendrect .宽度，200 .身高，200 .stylefill，d62728 .stylepointer事件，全部； 大标题 .textlave； var smallRect=g.appendrect 艾特克斯先生，50岁 attry先生，50岁 .宽度，100 .身高100 .样式填充，1f77b4； smallRect.appendtitle .textmall；