时间戳

首页 > 解决方案 > SVG React 组件不会居中

reactjs - SVG React 组件不会居中

问题描述

我的网站中有一个 svg 想要制作动画，因此我将标签从 img 更改为 svg 以使动画正常工作。

不幸的是，这导致我在窗口中正确居中 SVG 的问题。我无法响应地做到这一点

我创建了一个沙箱来为您重现该问题。

https://codesandbox.io/s/tender-fast-xdjzk

我尝试过的包括：

 .globe-svg {
   position: absolute
   transform: (-50%, -50%)

 .App {
    display: flex,
    align-items: center,
    justify-content: center

我能够达到我想要的最接近的是使用position: relative并设置left为某个百分比，但这根本没有响应，因此left: 50%只能在一个视口宽度下工作。

标签： reactjssvg

解决方案

感谢 Robert Longson 和 Toni Michel Caubet 帮助我将这些拼凑起来，但我认为最好将我提出的解决方案发布在这里，因为讨论主要在评论线程中。

首先，我将解决我的错误：

  1. 无效的视图框

正如罗伯特指出的那样，我误解了如何使用 viewBox 并因此使用了不正确的值。为了帮助解决我的问题，我将 viewBox 设置为0 0 380 380并相应地调整了高度和宽度

    <svg
      width="380px"
      height="380px"
      viewbox="0 0 380 380"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`globe-svg ${classActive}`}
    >
  1. HTML，应用程序 100% 高度的正文重置

这对于应用程序处于 100% 高度并且对元素的其余 CSS 产生影响是必要的。

html,
body {
  height: 100%;
  margin: 0;
}

App 和 Svg CSS 的主要变化

为了在进行这些关键更改后真正居中 SVG，我使用了 flexbox 和transform:translate(). 我在发布之前尝试过这个，但由于当时我没有在上面做两个更改，它不能作为一个解决方案正常工作。


.App {
  font-family: sans-serif;
  text-align: center;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

再次感谢你的帮助！

推荐阅读