如何在react gatsby中调整大小和svg徽标？

Question

​

​

我一直试图在不使容器本身变大的情况下调整这个徽标的大小。我完全被困住了，不知道该怎么办。使用内联样式<svg viewBox="0 0 493.19 493.19" width='400'height='400'>修改徽标svg文件会产生上述结果。我只是想让标志更大，而不是把它下面的所有组件都压下来。我会张贴布局代码本身，如果这将使事情更容易帮助我。谢谢!

  const data: QueryResult = useStaticQuery(query)

  return (
    <ThemeProvider theme={theme}>
      <>
        <GlobalStyles />
        <Wrapper>
          <SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
            <Flex
              flexWrap="nowrap"
              flexDirection={['row', 'row', 'row', 'column']}
              alignItems={['center', 'center', 'center', 'flex-start']}
              justifyContent="space-between"
            >
              <Box width={['3rem', '4rem', '5rem', '8rem']}>
                <Link to="/" aria-label="LekoArts, Back to Home">
                  <Logo />
                </Link>
              </Box>
              <Nav
                color={color}
                mt={[0, 0, 0, 10]}
                as="nav"
                flexWrap="nowrap"
                flexDirection={['row', 'row', 'row', 'column']}
                alignItems="flex-start"
              >
                {data.navigation.nodes.map((item) => (
                  <PartialNavLink to={item.link} key={item.name}>
                    {item.name}
                  </PartialNavLink>
                ))}
              </Nav>
            </Flex>
          </SideBarInner>
          <Main>{children}</Main>
          <Footer color={color}>
            <Box p={[6, 6, 8]} fontSize={0}>
              little things with love <a href="https://www.lekoarts.de/en">LekoArts</a>.<br />
              <a href="https://github.com/LekoArts/gatsby-starter-portfolio-jodie">Source</a>.
            </Box>
          </Footer>
        </Wrapper>
      </>
    </ThemeProvider>
  )
}

export default Layout```

Answer 1

SVG维度不会改变viewBox中路径的大小，它们会改变包含额外空白的路径的SVG对象的大小。

我会撤消您对viewBox所做的更改，并删除内联样式的宽度和高度。然后，SVG应该自动调整大小以适合它所在的容器。

Answer 2

尝试在svg代码中将width设置为100%，然后通过调整包含svg的容器的width来使用CSS控制svg的大小(但是您正在实现css)。

类似于：

.sl-container {
    width: 4rem;
}

编辑:如果你需要实现css的帮助，你可以找到大量实现here的很好的解释。内联样式可能是最简单的方法。

<Logo style="width: 4rem;" />