动态缩放任何嵌入式SVG以适合一个容器

2024-05-21 • 问答

我知道如何缩放嵌入式SVG，但是我一直在动态地缩放任何SVG以适应一个特定的容器方面遇到问题。我已经尝试过各种不同的方法，但是没有运气。我找到了SVGjs，但是我在React环境中工作，我在想，我必须做一些骇人听闻的工作才能使它工作。无论如何，我已经清理了代码并将其恢复到原来的状态。

返回的组件。请注意，path是动态svg路径字符串。 viewBox值是我正在使用的东西，但是每个图像可能需要不同的值。

return (<div>
  <svg classname={classes.icon} viewBox="0 0 30 30" preserveAspectRatio="none">
    <path d={path} />
  </svg>
  {label}
</div>)

...我尝试过的样式...

const useStyles = makeStyles(() => ({
  icon: {
  height: '5vh',width: '5vw'
  }
}));