当 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 上绘制。