HTML 中的 SVG 占用太多空间

Question

我想要的是使用 SVG 内“路径”定义中的图标。但是当我尝试将其应用到我们的对话框时，SVG 占用了很大的空间。

我可以通过在 SVG 上强制使用宽度样式来稍微控制它，但我不希望这样，因为并非所有图标都具有完全相同的尺寸。

常见的建议（也是 gpt 提出的）是设置视图框。但当我这样做时，我得到的结果我也不明白。当我保留周围的 div 并设置 viewbox 0 0 40 40 时，svg 就不再可见了。当我删除周围的 div 并为视图框使用相同的值时，图标很大。

作为参考，我尝试渲染的路径

"<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z\"/>";

HTML

<div style="display: flex; align-items: center">
    <svg viewBox="0 0 40 50" xmlns="http://www.w3.org/2000/svg">
        @((MarkupString)IconPath)
    </svg>
    <h3 style="margin-left: 15px;">@MudDialog!.Title</h3>
</div>

PS：我们正在使用 Blazor，但即使我使用纯 HTML 只是为了练习，我也没有得到任何接近我想要实现的目标。

Answer 1

我认为这不是 SVG 问题，而是 Flexbox 问题。您可以检查 SVG 的视图框到底做了什么，它对 SVG 本身的渲染大小影响为零，而只影响可用空间内内容的大小。

您的问题是两个 Flexbox 容器呈现为相同的大小。您可以尝试给第二个容器一个

flex-grow: 1

以使其更大。也许您可以限制 SVG 的

max-width

（即使所有图标的大小都不同）