Div öğesinde svg'nin altındaki fazladan boşluktan nasıl kurtulurum

93

İşte sorunun bir örneği (Firefox ve Chrome'da test edilmiştir):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Snippet'i genişlet

JSFiddle'da görüntüle

Mavinin altındaki fazladan redboşluğa dikkat edin .divsvg

Zaten ayarlamayı paddingve marginher iki unsuru da denedim 0, ama şanssız.

html css svg

— Daniel
kaynak

Görüntülerle ilgili benzer bir sorunla ilgili görünüyor, örneğin stackoverflow.com/questions/7774814/… .

— Daniel

182

İhtiyacınız display: block;var svg.

<svg style="display: block;"></svg>

Bunun nedeni, satır içi blok öğelerinin ( <svg>ve gibi <img>) metin taban çizgisine oturmasıdır. Gördüğünüz fazladan boşluk, karakter altlarını yerleştirmek için kalan boşluktur ('y', 'g' vb. Üzerindeki kuyruk).

Saklamanız vertical-align:topgerekirse de kullanabilirsiniz inlineveyainline-block

— Andy
kaynak

İnanılmaz. Öyleyse tüm satır içi öğeler altta beyaz boşluk ekler mi?

— clapas

2

Açıklama, inline-blocköğelerin ( <svg>ve gibi <img>) metin taban çizgisine oturmasıdır. Gördüğünüz fazladan boşluk, karakter altlarını yerleştirmek için kalan boşluktur ('y', 'g' vb. Üzerindeki kuyruk).

— Paul LeBeau

1

Tercih ederimvertical-align:top

— John Xiao

Fazladan boşluğun bununla ilgili olduğuna ikna olmuştum line-height, ancak line-height: 0svg'yi ve / veya kapsayıcısını ayarlamak hiçbir fark yaratmadı. Sadece display: blockçözdüm. Büyük bir SVG üzerinde çalışıyorsanız, bu çok büyük bir sorun çünkü onu asla satır içi olarak düşünmezsiniz. Küçük bir simgeniz varsa, mantıklı geliyor.

— devuxer

display: blockBenim için çalışıyorum ama vermedi vertical-alignmi

— Jay

12

svgbir inlineunsurdur. inlineöğeler boşluk bırakır.

Çözüm:

Ekle display:blockiçin svgveya ebeveynin yapmak yüksekliği ile aynı div svg.

DEMO burada.

— Hiral
kaynak

5

Diğer bir alternatif, font-size: 0svg ebeveynine eklemedir .

— Ângelo Lucas
kaynak

3

displaySvg'nin özelliğini olarak değiştirin block.

— Malachi
kaynak

1

Eklemeyi deneyin height:100pxiçin divve bir kullanma height="100%"üzerine svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

— Danrodi
kaynak

4

Yorumun için teşekkürler. Bu iyi çalışıyor, ancak kişi svgönceden yüksekliğini bilmediğinde zorlaşıyor.

— Daniel

1

basitçe ana div öğesine yükseklik ekleyin

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

— Farshad
kaynak

0

Tarzınızı şununla değiştirin:

style = "background-color: kırmızı; satır yüksekliği: 0;"

— jcdsvg
kaynak