html - 调整插入内容的 svg 图像大小：url()

Question

好的，我得到的是以下内容：通过 css 插入到 html 中的具有不同宽度/高度的多个 svg 图像。我想将它们全部缩放到相同的宽度，但这不起作用（至少在 Safari、Chrome 和 Firefox 中不起作用）。

html:

<h4 class="before" id="foo">Foo</h4>
<h4 class="before" id="bar">Bar</h4>
<h4 class="before" id="foobar">Foobar</h4>

CSS：

.before:before { width: 20px; }
#foo:before { content:url('foo.svg'); }
#bar:before { content:url('bar.svg'); }
#foobar: before { content:url('foobar.svg'); }

我如何调整这些 svg 图像的大小，以便它们以 20px 的宽度显示（但不要更改 svg 本身）？

Answer 1

如果您知道高度将是多少，您可以将图像设置为伪元素的背景并声明background-size: 20px auto;，但您需要知道伪元素本身高度的确切大小或更大。

除此之外，我无法找到一种方法让它完全只在 CSS 中工作。如果您可以访问服务器端编码，则可以打开 SVG 文件并自动找出大小。