SVGPanZoom, мешающий динамическому контенту ForeignObject - PullRequest
Новая
       54

SVGPanZoom, мешающий динамическому контенту ForeignObject

0 голосов
/ 05 ноября 2019

Мне нужна опция на моей карте 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);
...