resize插入内容的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图像，使它们显示与每个20像素宽度（但不改变SVG本身）？

Answer 1

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

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