动态调整内联SVG的大小

Question

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

Answer 1

如果您内联SVG，则不需要Javascript。例如，您可以像这样扩展到48px 24px图标：

<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;
}