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

我一直在尝试调整这个标志的大小而不使容器本身变大。我完全卡住了，不知道该怎么办。使用内嵌样式修改徽标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```

常量数据：QueryResult=useStaticQuery（查询） 返回( {data.navigation.nodes.map（（项）=>( {item.name} ))} {儿童} 带着爱的小事。
. ) } 导出默认布局```

---

SVG viewBox维度不会更改SVG中路径的大小，它们会更改包含路径的SVG对象的大小，这些路径会产生额外的空白

---

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

尝试在

SVG

代码中将

宽度设置为
100%
，然后通过调整容纳
SVG
的容器的
宽度来控制
SVG
的大小（无论您如何实现CSS）

比如：

.sl容器{
宽度：4rem；
}

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


这是它的默认状态，svg很小，位于容器的一角。.sl容器指向什么？这都是在react中完成的，没有单独的css文件。只有一个layout.tsx文件。我不知道如何才能像传统方式那样为svg分配一个类并更改宽度。我编辑了我的答案，为在react中实现css提供了一些额外的参考。假设我将它放在正确的位置
const Logo=（）=>（callmeJ将svg包装在div标记中，并将内联样式放在div中，那么这一切都不会发生