yeniden boyutlandırma svg görüntü içeriğiyle eklenir: url()

Question

Tamam, sahip olduğum şey şudur: css ile html içine eklenen farklı genişlik/yüksekliklere sahip çoklu svg görüntüler. Hepsini aynı genişliğe göre ölçeklendirmek istiyorum ancak bu çalışmaz (en azından Safari, Chrome ve Firefox'ta değil).

html:

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

css: her 20px genişliğinde şekilde yönlendirir O svg resimlerinizin boyutunu olabilir (ancak svg değişmez Nasıl

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

kendisi)?

Answer 1

Yüksekliğin ne olacağını biliyorsan, görüntüleri yapay öğelerle arka plan olarak ayarlayabilir ve background-size: 20px auto; bildirebilirsin, ancak tam boyutunu ya da psuedo'nun boyu için daha büyük olduğunu bilmelisin. -element kendisi. Bunun ötesinde, sadece CSS'de tamamen çalışmasını sağlamak için bir yol bulamadım. Sunucu tarafı kodlamaya erişiminiz varsa, SVG dosyasını açabilir ve boyutları otomatik olarak balıktan çıkarabilirsiniz.