yükseklik: otomatik çalışma SVG çalışmıyor

Question

Burada ayrıntılı bir şekilde "sembol" yöntemini kullanarak bir SVG hareketli sayfası kullanmaya çalışıyorum.

http://css-tricks.com/svg-sprites-use-better-icon-fonts/

Benim HTML çok basittir.

<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> 

Ve burada SVG dosyasından bir örnek sembolüdür

<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol> 

ben yaşıyorum sorun olduğunu ben SVG yüksekliğini 64px için SVG elemanının genişliğini ayarlamak için CSS kullandığınızda otomatik olarak 150 piksele ayarlanır. Yüksekliği ayarlamayı denedim: auto; ve yükseklik:% 100; SVG elemanında ancak hiçbir fark yaratmaz. İşe koymanın tek yolu, yüksekliği ayarlamaktır: 64px; Yapmak istemediğim için simgelerin en boy oranı her zaman kare olmayabilir. Bunu yapmak istediğim şey, SVG'yi otomatik olarak en boy oranıyla ölçeklendirmektir, bu nedenle genişliği 400px'e ayarlıyorumsa, 4: 3 simgesi (izleme kutusu tarafından tanımlandığı gibi) otomatik olarak 300px'lik bir yükseklik alır.

SVG'yi ölçekleme ve en boy oranını koruma konusunda birkaç kılavuz okudum ve bir IMG öğesi kullanırken bazı çözümlerim var, ancak inline SVGS için birini veya USE ile harici bir SVG'yi bulamıyorum.

IE9 + ve Android 4.0+ dahil olmak üzere tüm tarayıcılarda çalışan bir çözüm bilen var mı?

Answer 1

DEMO

Bağlamaya her öğe üzerinde bir Viewbox tanımlamanız gerekir. çünkü bir SVG belgesinde farklı öğeler olabilir.

viewBox bağlantısını yaptığınız öğeden kaldırın. Bağlantı kurduğunuz yerin bir viewBox ekleyin.

<svg class="test" viewBox="0 0 25 25"> 
    <use xlink:href="/images/iconSprite.svg#clock"/> 
</svg> 

Şimdi bunu ölçeklenebilir:

Eğer css genişliğini tanımlarsanız:

.test { 
    width: 50px; 
} 

Sanki görüntüler

Sana bir svg öğesine Viewbox eklemek önermek yükseklik veya genişliğe sığdığı sürece. Eğer duyarlı bir tasarıma istiyorsanız

Yani basitçe % uzunluk
.test { width:30%; }

SCALE SVG A bunu ölçeklenebilir eski sürümlerinde CSS-hileler :) dan

Answer 2

svg ölçekleme hakkında gerçekten iyi makale Safari'nin yanı sıra birkaç eski Android tarayıcısı, görüntüleme kutusunu ve genişliğini ayarlamak yeterli değildi.

Benim örneğimde, yüksekliği uygulamem gerekiyor:% 100; yanı sıra bir genişlik.