时间戳

首页 > 解决方案 > 使用 MouseMove 函数通过 svelte 框架移动 svg 中的元素

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

问题描述

如果这是一个愚蠢的问题，我深表歉意，因为我是 Web 开发的新手，在此先感谢您！

我目前在 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 的位置？

请提供一些帮助。谢谢

标签： javascriptsvgsvelte

解决方案

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

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

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');
    }

推荐阅读