Как вращать элемент SVG, который находится внутри группы других элементов?

Question

Никола

svg , javascript , d3js

Как вращать элемент SVG, который находится внутри группы других элементов?

Как можно решить проблему с вращением элемента SVG, который находится в группе с другими элементами, чтобы он оставался на месте при вращении, а не уезжал? Я пробовал использовать матрицы для пересчета и изучал различные формулы из интернета, но столкнулся с тем, что элемент начинает вращаться не на своем месте после первого вызова вращения. Я также пытался вычислить глобальные координаты элемента до вращения и перемещать его на них после вращения, но получается так, что глобальные координаты оказываются новыми после вращения. Может кто-то объяснить, почему элемент съезжает и как можно сделать так, чтобы он оставался на месте при вращении? Код для изучения доступен по ссылке - <a href="https://jsfiddle.net/3vyauj6p/" rel="nofollow">https://jsfiddle.net/3vyauj6p/</a>

22 мая 2024 г. 10:41

Ответы на вопрос 1

Похожие вопросы

Answer 1

Проблема возникает из-за того, что при вращении элемента внутри группы координаты элемента относительно группы также изменяются. Чтобы решить эту проблему, можно вращать группу элементов, в которой находится элемент SVG, а не сам элемент. Таким образом, элемент будет оставаться на своем месте относительно координат группы.

В вашем коде нужно изменить функцию rotateElement, чтобы она вращала не элемент, а группу вращаемых элементов. Например, можно добавить группу <g id="rotatingGroup"> и поместить в нее все элементы, которые нужно вращать. Затем вызывать rotateElement для этой группы:

```jsx
function rotateElement(degrees) {
  var group = document.getElementById('rotatingGroup');
  group.setAttribute('transform', 'rotate(' + degrees + ' 150 150)');
}
```

Таким образом, все элементы внутри группы будут вращаться вместе, и они останутся на своем месте относительно группы. Ваш код будет выглядеть примерно так:  

```jsx
<svg width="300" height="300">
  <g id="rotatingGroup">
    <circle cx="150" cy="150" r="50" fill="red"/>
    <rect x="100" y="100" width="100" height="100" fill="blue"/>
  </g>
</svg>
```

Теперь при вызове функции rotateElement элементы будут вращаться в группе, не уезжая от своего места. 

Ссылка на исправленный код: [https://jsfiddle.net/qdo5390s/](https://jsfiddle.net/qdo5390s/)