动态调整内联 SVG 的大小

Question

我有一个内联渲染的 SVG <div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />。它需要这样呈现（不在img 标签或背景中），以便我可以在 svg 中设置某些属性的样式。虽然我成功地设置了未在 svg 中设置的属性（使用 css 选择器），但我无法设置高度和宽度，因为它被内联高度/宽度属性覆盖。那么最好的方法是什么，给定一个具有高度/宽度的 svg，然后从 CSS 控制高度和宽度？可能吗？或者如果没有，调整内联 svg 大小的最佳做法是什么？

Answer 1

如果您内联 SVG，则不需要 Javascript。例如，您可以将一个 24 像素的图标缩放到 48 像素，如下所示：

<div class="Icon">
  <svg class="Icon-image" width="24" height="24" viewBox="0 0 24 24">...</svg>
</div>

CSS：

.Icon {
  width: 48px;
}
.Icon svg {
  width: 100%;
  height: auto;
}