javascript - 无论vewport发生什么情况，如何确保SVG路径（设计）保持在死点？

Question

我有一个项目基本上分为 2 层。底部的图层有一个带有大量不同路径的大型 SVG 对象。最上面的图层是一个小的 SVG 对象，我想保持完全居中。底层的 CSS 位置是绝对的，顶层是固定的。顶部的 SVG“kindof”保持居中，但如果我更改 Safari 浏览器的缩放比例，则在某些情况下居中效果会丢失。 网页设计中有生命周期方法吗？每当视口发生任何变化时，我是否可以调用一个方法，这可以让我动态地重新定位顶层 SVG 设计，并让它无论如何都保持完美居中？

PS：我希望最终将这个项目转移到 React-Native（我对此一无所知），如果您希望迁移到基于移动的平台，网页设计规则是否相关？抱歉代码不足，感谢阅读！

标签： javascripthtmlcssreact-nativesvg

Answer 1

把这两行放在 style.css 你指定的 div 类中。

display: block;
margin: auto;

然后尝试运行它，您将能够看到 .svg 在中心对齐。

或者如果我的剂量不起作用，请检查这个