SVG作为ReactComponent-是否有可能在渲染中获得宽度

Question

从'../images/299.svg'中导入{ReactComponent作为SVGTest}

有没有一种方法可以在返回期间从SVGTest中提取宽度。

我想比较SVG的默认宽度与窗口的宽度。如果小于我要使用的SVG宽度。

此刻，我将App中所有数百个SVG的宽度设置为290px，并且高度会相应调整。

但是，有些SVG较宽，对于那些SVG，我更愿意在默认的290px上使用其宽度。

Answer 1

您应该避免对SVG进行硬编码，这也是将SVG视为组件的一种好习惯。

尝试使用CSS重置SVG的width，height，并使用viewBox进行缩放。

这样，它将缩放其容器（在下一个示例中为Box）

const Box = styled.div`
  width: 300px;
  background-color: palevioletred;
`;

const SVGContainer = styled.div`
  svg {
    width: 100%;
    height: 100%;
  }
`;

// Default width,height of SVG are 100px
const App = () => (
  <Box>
    <SVGContainer>
      <SVG />
    </SVGContainer>
  </Box>
);