svg - 使用 CSS 为其添加大小时，SVG 不缩放

Question

我正在尝试使用 css 通过设置width和height比内联元素更小的值来调整 svg 元素的大小，但它不是缩放，最终结果是一个空方块，问题是<svg>元素本身会改变大小，但是<path>' s 里面没有，这可以通过在浏览器的 devtools 中检查它们来显示。

svg 元素使用 SVGR 作为react组件导入，样式使用styled-components.

在写这篇文章之前，我在网上阅读了一些可能的解决方案，但没有一个可行（删除内联宽度和高度，将视图框添加到与宽度和高度相同的值等......），有什么线索吗？

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 <title/>

 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_1" fill="#fff133" d="m276.6,127.6a148.4,148.4 0 0 0 -114.46,242.86a148.49,148.49 0 0 0 164.33,16.54a150.66,150.66 0 0 1 -15.94,-16.51a148.38,148.38 0 0 1 9.79,-236.29a148.18,148.18 0 0 0 -43.72,-6.6z"/>
  <path id="svg_2" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" stroke="#455a64" fill="none" d="m116.5,207c-0.37,1.05 -0.73,2.11 -1.07,3.17"/>
  <path id="svg_3" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" stroke="#455a64" fill="none" d="m109.77,234.43a148.43,148.43 0 0 0 221,150.11a148.44,148.44 0 0 1 0,-257.08a148.46,148.46 0 0 0 -204,56.62"/>
 </g>
</svg>

标签： svg