在调整窗口大小时刷新 svg 坐标

Refresh svg coordinates on window resize

本文关键字：刷新 svg 坐标 小时 调整 窗口      更新时间：2023-09-26

我是SVG的新手，我在解决这个问题时遇到了问题：

我正在尝试创建一个点系统，围绕单个轴旋转，就像太阳系一样。中心点是一个圆形的div，在CSS calc函数的帮助下放置在视口的中心：

left:  calc(50% - myDivWidth/2);
top: calc(50% - myDivHeight/2);
我用"

cx"和"cy"属性在这个中心点周围放置了SVG圆圈，一切正常。

问题是：当我调整窗口大小时，div会自动移动到屏幕中心。但是我的 SVG 圆没有移动，因为坐标系没有延伸到视口的新大小。现在，如果我在调整大小后重新加载页面，则所有内容都会再次正确放置。

我以为我可以在调整大小时重新计算圆圈的坐标，但这不是有点重吗？我所有的圆圈都放在高度和宽度为 100% 的 svg 标签中。

我希望你能帮我这个！谢谢！

如果将

viewBox 属性添加到 SVG，它将自动缩放以适应其父视口 （ <div class="univers"> ）。

<svg width="100%" height="100%" viewBox="-315 -315 630 630">

使用此视图框，您可以使用 （0,0） 作为轨道圆的原点。

在这里演示

相关文章：