我有一个“可缩放”的 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));
如何在较小的矩形上执行鼠标悬停或悬停事件，同时保持缩放行为不变？我需要更改“pointer-events”属性吗？
附言:(缩放最终用于正确查看较小矩形内的文本。因此，我决定将它们放在一个较大的矩形中，并对外部矩形内的所有内容执行缩放。)
最佳答案
较大的矩形从较小的矩形“窃取”事件。尝试将缩放行为附加到 SVG。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<div id="parent" style="text-align: center;"></div>
<script>
function zoomed() {
g.attr('transform', d3.event.transform);
}
var svg = d3.select("div").append("svg")
.attr("width", 800)
.attr("height", 500);
var g = svg.append("g");
var zoomBehavior = d3.zoom()
.scaleExtent([1 / 8, 4])
.on("zoom", zoomed);
svg.call(zoomBehavior);
var largeRect = g.append("rect")
.attr("width", 200)
.attr("height", 200)
.style("fill", "#d62728")
.style("pointer-events", "all");
largeRect.append("title")
.text("large");
var smallRect = g.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 100)
.attr("height", 100)
.style("fill", "#1f77b4");
smallRect.append("title")
.text("small");
</script>关于css - 如何显示可缩放 SVG 矩形内的 SVG 元素的工具提示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45642583/