我想在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);
          }            
} 

问题是，当我包括用于基本缩放/平移地图功能（https://github.com/ariutta/svg-pan-zoom）的SVGPanzoom库时，它无法正常工作。我是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);