动态调整内联 SVG 的大小

Posted 2023-03-06

【中文标题】动态调整内联 SVG 的大小

【英文标题】：Dynamically resize inline SVG

【发布时间】：2016-09-06 23:20:06

【问题描述】：

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

【问题讨论】：

Inline SVG in CSS的可能重复

这可能是使用一直讨厌的!important 标签的情况，除非您可以使用特异性覆盖这些标签的内联样式

SVG 将在 svg 标记上内嵌设置宽度和高度，删除它们然后纯 CSS 将允许您调整宽度和高度属性。

【参考方案1】：

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

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

CSS：

.Icon 
  width: 48px;

.Icon svg 
  width: 100%;
  height: auto;

【讨论】：

太棒了。谢谢！

哇，我已经四处寻找解决方案，而您的解决方案是迄今为止唯一在内联 SVG 上工作的解决方案。谢谢。

互联网上有太多关于 SVG 的噪音。这几乎就是我所需要的。