调整插入内容的svg图像:url()

Question

好吧,我得到的是以下内容:多个svg图像具有不同的宽度/高度,通过CSS插入到html中.我想将它们全部缩放到相同的宽度但不起作用(至少在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 文件并自动找出大小。