使用JS

Question

好时光论坛用户。我提前为我的英语道歉。我找不到答案（我决定问说英语的听众）。

相对于父容器（）成组嵌套的元素的绝对位置（坐标）。

<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMin slice" x="0" y="0" tabindex="1">
  <g transform="translate(100 100)">
       <g transform="translate(100 100)"> 
            <circle r="50" cx="25" cy="25" fill="yellow" />
       </g>
  </g>
<svg>

我想使用ES6 +相对于SVG的圆坐标。即x = 100 + 100 + 25，y = 100 + 100 + 25。

如何获取这些坐标？ （最多可以无限组嵌套）。感谢您的帮助。

enter image description here

Answer 1

1. 找到圆圈的println("0") runBlocking { val job = GlobalScope.launch(start = CoroutineStart.LAZY) { // launch new coroutine and keep a reference to its Job delay(1200L) println("1") } val job2 = GlobalScope.launch(start = CoroutineStart.LAZY) { // launch new coroutine and keep a reference to its Job delay(1000L) println("2") } println("3") job.join() // wait until child coroutine completes println("4") job2.join() // wait until child coroutine println("5") } println("6") 和cx值
2. 应用圆具有的任何变换
3. 提升到每个祖先元素并应用找到的所有变形
4. 到达根SVG元素时停止

cy

function getCirclePosition(circleElemId)
{
  var elem = document.getElementById(circleElemId);
  var svg = elem.ownerSVGElement;

  // Get the cx and cy coordinates
  var pt = svg.createSVGPoint();
  pt.x = elem.cx.baseVal.value;
  pt.y = elem.cy.baseVal.value;

  while (true)
  {
    // Get this elements transform
    var transform = elem.transform.baseVal.consolidate();
    // If it has a transform, then apply it to our point
    if (transform) {
      var matrix = elem.transform.baseVal.consolidate().matrix;
      pt = pt.matrixTransform(matrix);
    }
    // If this element's parent is the root SVG element, then stop
    if (elem.parentNode == svg)
      break;
    // Otherwise step up to the parent element and repeat the process
    elem = elem.parentNode;
  }
  return pt;
}


var pos = getCirclePosition("thecircle");
console.log("Coordinates are: " + pos.x + "," + pos.y);

更新

正如@ Vad0k所指出的，可以使用一种更简单但不明显的方法来代替：

<svg width="100%" height="100%" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMin slice" x="0" y="0" tabindex="1">
  <g transform="translate(100 100)">
       <g transform="translate(100 100)"> 
            <circle id="thecircle" r="50" cx="25" cy="25" fill="yellow" />
       </g>
  </g>
<svg>

function getCirclePosition(circleElemId)
{
  var elem = document.getElementById(circleElemId);
  var svg = elem.ownerSVGElement;

  // Get the cx and cy coordinates
  var pt = svg.createSVGPoint();
  pt.x = elem.cx.baseVal.value;
  pt.y = elem.cy.baseVal.value;

  return pt.matrixTransform(getTransformToElement(elem, svg));
}


function getTransformToElement(fromElement, toElement) {
  return toElement.getCTM().inverse().multiply(fromElement.getCTM());
};


var pos = getCirclePosition("thecircle");
console.log("Coordinates are: " + pos.x + "," + pos.y);

Answer 2

从顶部和左侧获得孩子和父母并获得差异

const circleLeft = circleElement.getBoundingRect().offsetLeft
const circleTop = circleElement.getBoundingRect().top
const parentLeft = circleElement.parentElement.getBoundingRect().offsetLeft
const parentTop = circleElement.parentElement.getBoundingRect().top
const changeInX = parentLeft - cirleLeft
const changeInY = parentTop - circleTop

如果要在此元素上注册事件，请通过将true作为第三个参数传递给addEventListener来将它们注册为捕获事件，而不是冒泡事件