使用 MouseMove 函数通过 svelte 框架移动 svg 中的元素答案

【问题标题】：Using MouseMove function to move elements in svg with svelte framework使用 MouseMove 函数通过 svelte 框架移动 svg 中的元素
【发布时间】：2020-06-16 15:55:04
【问题描述】：

如果这是一个愚蠢的问题，我深表歉意，因为我是网络开发的新手，非常感谢！

我目前在 svelte 框架内使用 svg。我将我的 svg 定义为<svg width={svg_width} height={svg_height}>。整个结构看起来像

<div class="demo-container">
|-<div id="playground-container">
  |-<svg>

这是我的 CSS：

.demo-container {
  display:inline-block;
}
#playground-container {
  position: relative;
  width: 75%;
  float: left;
  margin-right:5px;
}

我无法将 svg 中的坐标（例如 svg 中形状的位置）与鼠标事件（event.ClientX 和 event.ClientY）关联起来。它们似乎没有线性或仿射关系。此外，当我检查网页时，显示的 svg 尺寸与我定义的尺寸不匹配。

因此，当我将形状的位置直接设置为 event.ClientX 和 event.ClientY 时，它们会发疯。我应该如何将鼠标的位置转换为 svg 的位置？

请提供一些帮助。谢谢

【问题讨论】：

顺便说一句，我确实考虑过 svg 尺寸太大而无法放入网页的可能性，所以我尝试了 200*100 之类的东西，但同样的事情发生了。

标签： javascript svg svelte

【解决方案1】：

假设您的mousemove 事件处理程序附加到svg 元素，获取x 和y 坐标的方式参考svg 本身（svg 的左上角坐标为@987654325 @ 和右下角坐标为(svg_width, svg_height)) 是使用getBoundingClientRect:

<script>
  function mouseHandler(e) {
    const rect = e.currentTarget.getBoundingClientRect()
    console.log(`x: ${e.clientX - rect.x}, y: ${e.clientY - rect.y}`)
  }
</script>

<div class="demo-container">
  <div id="playground-container">
    <svg width={svg_width} height={svg_height} on:mousemove={mouseHandler}>
      // svg data (shapes, paths, etc.)
    </svg>
  </div>
</div>

【讨论】：

完美解决了我的问题！非常感谢！

【解决方案2】：

您需要在您的 html 标记中放置一个 on:mousemove={fixElement}。

这样的功能可能会像您描述的那样工作：

function fixElement(event) {
        console.log("in");
        let elem = document.querySelector('#playground-container');
        let y = event.clientY;
        let x = event.clientX;
        elem.style.setProperty('position', 'absolute');
        elem.style.setProperty('left', x + 'px');
        elem.style.setProperty('top', y + 'px');
    }

【讨论】：