Использование функции MouseMove для перемещения элементов в svg с помощью svelte framework - PullRequest
Новая
       23

Использование функции MouseMove для перемещения элементов в svg с помощью svelte framework

0 голосов
/ 16 июня 2020

Извините, если это глупый вопрос, так как я новичок в веб-разработке, и заранее большое спасибо!

В настоящее время я использую svg внутри svelte framework. Я определил свой 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 не соответствует тому, что я определил. , они go орехи. Как мне преобразовать расположение мыши в расположение svg?

Пожалуйста, помогите. Спасибо

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Предполагая, что ваш обработчик событий mousemove прикреплен к элементу svg, способ получения координат x и y по отношению к самому svg (с верхним левым углом svg, имеющим координаты (0,0) и в правом нижнем углу с координатами (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>
0 голосов
/ 16 июня 2020

Вам необходимо поместить 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');
    }
...