zmiana rozmiaru obrazu svg wstawiony z zawartością: url()

Question

Ok, otrzymałem następujące informacje: wiele obrazów svg o różnych szerokościach/wysokościach wstawianych do html przez css. Chcę je wszystkie skalować na tę samą szerokość, ale to nie działa (przynajmniej nie w Safari, Chrome i 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'); } 

Jak mogę zmienić rozmiar te obrazy svg tak, że są one wyświetlane z każdej szerokości 20px (ale nie zmienić SVG samo)?

Answer 1

Jeśli wiesz co Wysokości będą, można ustawić obraz jako tło do pseudo-elementów i deklarują background-size: 20px auto;, ale trzeba by znać dokładny rozmiar lub większe na wysokości psuedo -element się.

Poza tym, nie byłem w stanie znaleźć sposobu, aby to działało całkowicie tylko w CSS. Jeśli masz dostęp do kodowania po stronie serwera, możesz być w stanie otworzyć plik SVG i wyłowić rozmiary automagicznie.