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文件並自動查找大小。