javascript - SVGPanZoom 干扰动态 foreignObject 内容

Question

我想在我的 svg 地图上选择用户可以编写一些简单的文本。我想使用 foreignObject 和输入类型文本来做到这一点。

<img id ="text" src="slike/crtanje/text.svg" onclick="writeText()">


function writeText() {    
var draw = karta.select("#wrap")
            .on("mousedown", mousedown)
            .on("mouseup", mouseup);                

  function mousedown() {
     var m = d3.mouse(this);

      draw.append("foreignObject")
        .attr("xhtml", "http://www.w3.org/2000/svg")
        .attr("x", m[0])
        .attr("y", m[1])
        .attr("width", "200")
        .attr("height", "100")
        .attr("class", "forin")
        .append("xhtml:input")
        .attr("xmlns", "http://www.w3.org/1999/xhtml")
        .attr("type", "text" )
        .attr("id", "text");  
           }

  function mouseup () {
       draw.on("mousedown", null);
          }            
} 

问题是当我包含用于基本缩放/平移地图功能的 SVGPanZoom 库时（https://github.com/ariutta/svg-pan-zoom），它不起作用。我是 svg 的新手，如果有任何建议，我将不胜感激。我也尝试使用 contenteditable = "true" 但我再次面临与图书馆相同的问题。

svg.addEventListener("load", function(){
  htmlSVG = document.getElementById("hrzup").contentDocument;
  svgd3 = d3.select(htmlSVG);
  karta = svgd3.select("#karta");

$(document).ready(function () {
  panZoom = svgPanZoom("#hrzup", {
  controlIconsEnabled: true,
  contain: true,
  fit: 1,
  center: 1,
  dblClickZoomEnabled: false,
  minZoom: 0.1,
  panEnabled: true,
  })
});

}, false);

标签： javascriptd3.jssvgsvgpanzoom