如何设置SVG图标以适应容器大小？

Question

那么问题是 - 如何设置SVG图标以适应容器大小？现在它不幸的是在没有任何调整大小的情况下进行裁剪...我无法想出如何让我的file-SVG缩放！这个问题与内联SVG操作无关！

div {
  width: 50px;
  height: 50px;
}

img {
  width:100%;
  height:100%;
}

<div>
  <img src="https://svgshare.com/i/7Bw.svg" viewBox="0 0 10 10" preserveAspectRatio="none">
</div>

- Max Travis

---

@LuísFerreira 这不是重复问题！我的问题不是关于内联 SVG 图标，而是关于 img 文件！ - Max Travis

抱歉，我删除了该评论。 - Luís Ferreira

你能澄清一下你的问题吗？SVG图像填充容器，也许是它的多边形。 - Friday Ameh

如果您能用图像演示，那就更好了。 - Friday Ameh

@FridayAmeh 在另一个选项卡中打开SVG，你会看到它是一个圆形。 - Temani Afif

https://css-tricks.com/scale-svg/ - Renzo Calla

Answer 1

为了能够在后面进行缩放，您需要在 SVG 中内部定义 viewBox：

img {
  width:100%;
  height:100%;
}

<div style="width:50px;height:50px;">
  <img src="https://svgshare.com/i/7EX.svg">
</div>

<div style="width:100px;height:100px;">
  <img src="https://svgshare.com/i/7EX.svg">
</div>

这里是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98">
    <circle class='ui-icon__svg ui-icon__border' cx='50' cy='50' r='48' />
        <path class='ui-icon__svg' d='M31.5 42.5V36l45-.1.1 22.6H70m0 6.7H25l-.1-22.7H70v22.7zM36 43.1l.1 22-.1-22zm22.9 0l.1 22-.1-22zm-16.3-6.6l.1 6.1-.1-6.1zm22.9 0l.1 6.1-.1-6.1z' />
</svg>

- Temani Afif