SVG Viewbox ile ve genişlik ben ViewBox özelliklerine sahip satır içi SVG lezyonu inşa etmeye çalışıyorum ancak hiçbir açık genişlik veya yükseklik nitelikleri IE

Question

doğru yüksekliğe ölçekleme değildir. CSS kullanarak SVG'nin genişliğini% 100'e ayarlıyorum. Bu, viewBox tarafından ayarlanan en boy oranını koruyarak, SVG skalasını ambalajlama kabına bırakmalıdır. Chrome ve Firefox'ta, bu mükemmel çalışır!

İşte bahsettiğimi minimal codepen örnek: http://codepen.io/pcorey/pen/amkGl

HTML:

<div> 
    <svg viewBox="0 0 100 10"> 
    <text x="1" y="9">hello</text> 
    </svg> 
</div> 

CSS: ViewBox 100x10 olduğunu

div { 
    width: 400px; 
} 

svg { 
    width: 100%; 
    max-height: 100%; 
    outline: 1px solid tomato; 
} 

text { 
    font-size: 10px; 
} 

. Dış div, 400 piksel genişliğe sahip olacak şekilde ayarlanmıştır. Bu, SVG'nin yüksekliğinin 40px (ve Chrome/Firefox'ta) olması gerektiği anlamına gelir. (Div genişliği 1500 piksel aştığında bile ...) ANCAK, IE 11, genişliği

IE Bunu düzeltmek için güzel bir yolu var mı DAİMA 150px mı? IE neden bilinmeyen yüksekliği doğru şekilde kullanamıyor? Ben "intrinsic aspect ratio" hile kullanabilirsiniz, ancak bu süper çirkin, başka DOM öğesini gerektirir ve ben padding-top sarıcı boyutlandırır her zaman yeniden hesaplamak gerekir. Ben bunu yapmak istiyorum neden daha fazla bilgi için

, bu konuda hızlı bir blog yazısı yazdı: Yardım için http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/

Teşekkür! Belirli bir yüksekliğe ve genişliğe koymazsan

Answer 1

Bazı tarayıcılar (IE ve Safari) SVG varsayılan bir boyutu kullanmak olacaktır. Burada olan şey bu. Haklısınız, "içsel bakış açısı" başka bir Dom ve css gerektiriyor ve bunu aşabilirsek iyi olur. Buna bir çözüm vardır

, hesaplayıp dolgu-alt sağ yüksekliğini koyup bu hakkı "bilinmeyen yükseklik" verecektir olabilir istersen. http://codepen.io/tomkarachristos/pen/GZPbgZ

<!-- 
xMidYMin: Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. 
slice : the entire viewport is covered by the viewBox and the viewBox is scaled down as much as possible, 
height: if you dont set >= 1px some browsers will not render anything. 
--> 
<div> 
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice" 
     width="100%" style="height: 1px;overflow: visible; 
     /*without js:padding-bottom:55%*/"><text>hello</text> 
    </svg> 
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice" 
     width="100%" style="height: 1px;overflow: visible;"><text>Age</text> 
    </svg> 
</div> 

ve javascript: Tam bir çözüm burada görebilirsiniz

/* 
Here we do the hack. 
With the math type: percent * height/width 
we are adjust the total height of an element who is depend in width using the padding-bottom. 
You can put an inline padding-bottom if you want in html. 
*/ 

$(function() { 
    $('svg').each(function() { 
    var svg = $(this); 
    var text = svg.find('text'); 
    var bbox = text.get(0).getBBox(); 
    //the hack 
    var calcString = "calc(100% * " + bbox.height/bbox.width + ")"; 
    svg.css("padding-bottom",calcString); 

    svg.get(0).setAttribute('viewBox', 
          [bbox.x, 
          bbox.y, 
          bbox.width, 
          bbox.height].join(' ')); 
    }); 
}); 

Answer 2

Bir geçici çözümü tüm tarayıcılarda çalışması gerekir senin SVG içine oturur kaba boş bir resim eklemektir, hangi SVG aynı boyutlara sahiptir:

.wrap { 
 
    position: relative; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.viz { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="wrap"> 
 
    <img src="img/blank.png" /> 
 
    <div class="viz"> 
 
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 1000 600"></svg>    
 
    </div> 
 
</div>

Bu durumda

210, resim 600px tarafından 1000px doğal boyutlara sahip ve şeffaf olması (ya da .wrap kabın arka planını eşleştirme) gerekmektedir. Bu, svg'nin içinde bulunduğu kapsayıcının boyutuna uygun olacaktır. .viz öğesinin mutlak konumu, resmin hiçbir yerinde kalmasına izin vermeyecek, böylece yüksekliğini kullanarak hiçbir şey kesilmeyecek.