Как перетащить svgs, вставленные нажатием кнопки? - PullRequest
Новая
       19

Как перетащить svgs, вставленные нажатием кнопки?

0 голосов
/ 10 октября 2018

Что я пытаюсь сделать, это вставить круги SVG, нажав кнопку в рабочей области.Кроме того, я хочу свободно перетащить все эти круги.Можете ли вы помочь мне код? 

document.getElementById('draw').addEventListener('click', function(){

document.getElementById('here').innerHTML = 
'<svg height="100" width="100">' + 
  '<circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="rgba(130,130,130,0.6)">' + 
'</svg>';

});
<button id="draw">Draw Circle</button>
<div id="here"></div>

1 Ответ

0 голосов
/ 10 октября 2018

Я был поражен, что создание SVG, как это будет работать, и это работает!(на IE тоже).Однако это создает проблемы при попытке работать с событиями.Я предпочитаю создавать элемент SVG и элемент круга с помощью createElementNS и использовать appendChild для добавления их в DOM 

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";


/*let innerSVG = '<svg height="100" width="100">' + 
  '<circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="rgba(130,130,130,0.6)">' + 
'</svg>';*/

let svgdata =  {width:100,height:100}
let circledata = {cx:50,cy:50,r:40}
// creating a new SVG element using the data
let svg = newSVG(svgdata);
// creating a new circle element using the data and appending it to the svg
let circle = drawCircle(circledata, svg);
// the offset between the click point on the SVG and the left upper corner of the SVG
let offset={}
// a flag to control the dragging
let dragging = false;
// the mouse position
let m;
document.getElementById('draw').addEventListener('click', function(){

here.appendChild(svg)});


// events
here.addEventListener("mousedown",(evt)=>{
  dragging = true;
  offset = oMousePos(svg, evt);
})

here.addEventListener("mousemove",(evt)=>{
  if(dragging){
   m = oMousePos(here, evt);
   svg.style.top = (m.y - offset.y)+"px";
   svg.style.left = (m.x - offset.x)+"px";
  }
})

here.addEventListener("mouseup",(evt)=>{
  dragging = false;
})




function drawCircle(o, parent) {
  var circle = document.createElementNS(SVG_NS, 'circle');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      circle.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(circle);
  return circle;
}


function newSVG(o) {
  let svg = document.createElementNS(SVG_NS, 'svg');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      svg.setAttributeNS(null, name, o[name]);
    }
  }
  return svg;
}



function oMousePos(elmt, evt) {
      let ClientRect = elmt.getBoundingClientRect();
                return { 
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
      }
}
svg{border:1px solid;position:absolute;}

circle{
  stroke:black;stroke-width:1;fill:rgba(130,130,130,0.6);
}

#here{width:100%; height:100vh; background-color:#efefef;margin:0; padding:0; position:relative}
<button id="draw">Draw Circle</button>
<div id="here"></div>
...