позиционирование SVG на изменение размера окна после изменения масштаба / масштаба с реагированием

Question

Я пытаюсь изменить размер и масштабировать svg, встроенный в контейнер div. Моя цель - изменить te svg через реквизит как компонент React. Вы можете посмотреть код песочницы здесь .

Я заставил кружок SVG сохранять свою позицию при изменении размера окна, используя viewbox и матричное преобразование. И я могу увеличить круг соответственно на колесе мыши. Для увеличения я установил ширину и высоту родительского контейнера в состоянии компонента в событии изменения размера окна.

Но когда я изменил масштаб до изменения размера окна, круг не сохраняет свою позицию.

У вас есть идеи, как сделать мои координаты независимыми от масштаба увеличения?

Я перепробовал много вещей, например, вычисление новой ширины и высоты при каждом изменении масштаба (и так в окне просмотра), но это не сработало ...

Кроме того, если вы знаете какие-либо полезные ресурсы, на которые можно направить меня по поводу манипулирования svg на холсте, это также было бы очень полезно!

Answer 1

Привет, я вижу вашу проблему, я реорганизовал ваш код и заставил его работать, вы можете проверить его здесь . Проблема заключается в том, что при масштабировании svg центральная точка также масштабируется. Что нужно сделать, это применить инверсию шкалы к центру, чтобы расположить окружность в центре div. Посмотрите на метод CalculatePoisition. Я сделал это в