Question

我正在尝试使用内部 javascript 的 svg，请参见此处 <"https://jsfiddle.net/melvinT/boaus7k1/76/">svg 可拖动三角形路径的 jsfiddle 它是三个拖动三角形的圆圈。但是当我将它移入 svg 时，有一点顽固地停止工作，我不知道为什么？当我将它拖入 svg 时，神秘停止移动的部分如下（在最后）为什么？如何将其移动到 svg 中？

var elements = [p1, p2, p3,];
for (i = 0; i < elements.length; i++) {
elements[i].addEventListener('mousedown', onMouseDown);
}

Answer 1

如果您将脚本元素放在 SVG 的底部，那么它应该可以工作，因为它会在圆形元素加载后运行。

<svg id="figure1" width="500" height="500">
  <style>
    #figure1 {
      border: 1px solid blue;
    }
  </style>

  <path d="M170 150 20 110 250 60 z" stroke="pink" fill="none" id="controlPath"/>
  <circle cx="170" cy="150" r="8" id="p1"  fill="red"   style="cursor: move;"/>
  <circle cx="20" cy="110" r="8" id="p2" fill="black" style="cursor: move;"/>
  <circle cx="250" cy="60" r="8" id="p3"  fill="lightgrey" style="cursor: move;"/>


 <script type="text/javascript">
    <![CDATA[

var svg = document.getElementById('figure1');
svg.addEventListener('mousemove', onMouseMove);
svg.addEventListener('mouseup', onMouseUp);

var controlPath = document.getElementById('controlPath');

var dragElem = null;
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
var p3 = document.getElementById('p3');

var elements = [p1, p2, p3,];
for (i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mousedown', onMouseDown);
}

function onMouseMove(ev) {
  var p;

  if (!dragElem) {
    return;
  }

  p = getClientPointInSVG(ev);
  dragElem.setAttribute('cx', p.x - mouseOffsetX);
  dragElem.setAttribute('cy', p.y - mouseOffsetY);

  controlPath.setAttribute('d',
    'M' + p1.getAttribute('cx') + ' ' + p1.getAttribute('cy') +
    ' ' + p2.getAttribute('cx') + ' ' + p2.getAttribute('cy') +
    ' ' + p3.getAttribute('cx') + ' ' + p3.getAttribute('cy') +
    ' ' + 'z' );

}

function onMouseDown(ev) {
  var p;

  dragElem = ev.target;
  p = getClientPointInSVG(ev);
  mouseOffsetX = p.x - dragElem.getAttribute('cx');
  mouseOffsetY = p.y - dragElem.getAttribute('cy');
}

function getClientPointInSVG(ev) {
  var p, m;

  p = svg.createSVGPoint();
  p.x = ev.clientX;
  p.y = ev.clientY;

  m = dragElem.getScreenCTM();
  return p.matrixTransform(m.inverse());
}

function onMouseUp(ev) {
  dragElem = null;
}

var mouseOffsetX, mouseOffsetY;
    ]]>
   </script>
</svg>

当一个 javascript 短语在 svg 内移动时，带有可拖动路径的 svg 停止工作

1 个答案: