当 HTML 画布通过 foreignObject 在 svg 中时，我失去了所有 svg 交互性

Question

我有一个由多边形组成的 svg 地图。在多边形悬停上，有显示国家名称的工具提示。每个多边形都有一个圆圈代表首都，悬停时显示名称。我想在地图（曲线、线、圆、矩形...）上制作鼠标绘图选项，所以我在 svg 中的 foreignObject 中使用了画布。Svg 在 html 中作为对象：<object id="map" type="image/svg+xml"></object>画布在 foreignObject 内的 svg 中：<foreignObject height="988" width="1575" y="0" x="215"> <span xmlns="http://www.w3.org/1999/xhtml">  <canvas id="canvas" width="960" height="1575"></canvas> </span></foreignObject>用鼠标移动绘图：var canvas = svgDoc.getElementById("canvas");var context = canvas.getContext("2d");var started = false;function ev_mousemove (ev) {  var x, y;  x=ev.pageX;  y=ev.pageY;if (!started) {  context.beginPath();  context.moveTo(x, y);  started = true;} else {  context.lineTo(x, y);  context.stroke();}}canvas.addEventListener('mousemove', ev_mousemove, false);问题是画布与我的 svg 重叠，我可以在画布中用鼠标绘制，但我失去了 svg 的所有交互性（工具提示、悬停）。就像画布是 svg 上的活动层，被锁定和可见。如何让 svg 和 canvas 一起工作？

Answer 1

我解决了不使用画布的问题。使用 d3.js 库可以直接在 svg 上绘制。