我有一個由多邊形組成的 svg 地圖。在多邊形懸停上，有顯示國家名稱的工具提示。每個多邊形都有一個圓圈代表首都，懸停時顯示名稱。我想在地圖（曲線、線、圓、矩形...）上制作鼠標繪圖選項，所以我在 svg 中的 foreignObject 中使用了畫布。Svg 在 html 中作為對象：<object id="map" type="image/svg+xml"></object>畫布在 foreignObject 內(nèi)的 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 一起工作？