ng-dahil SVG'leri dahil ancak boyutlar

Question

dahil Bu tekniği sevdim, ama hepinizin bildiği gibi, svg grafikleriyle ilgili en iyi şeylerden biri, aynı dosyayı yeniden boyutlandırabilmeniz ve yeniden kullanabilmenizdir. Ng-include için bir boyut değişkeni eklemek mümkün mü?

örn:

<div ng-include="'img/logo-rev.svg'" class="ng-scope" width="50"> 

Answer 1

cevap width veya height sizin SVG belirttiğiniz getirmemektir. Ya da yaparsanız, her ikisinin de "100%" olarak ayarlandığından emin olun. Sonra SVG'niz uygun bir viewBox özniteliğine sahip olduğu sürece, ebeveyni oluşturduğunuz boyutta ölçeklendirilir.

.small { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.large { 
 
    width: 150px; 
 
    height: 150px; 
 
}

<div class="small"> 
 
    <svg viewBox="0 0 100 100"> 
 
    <circle cx="50" cy="50" r="50" fill="green"/> 
 
    </svg> 
 
</div> 
 

 

 
<div class="large"> 
 
    <svg viewBox="0 0 100 100"> 
 
    <circle cx="50" cy="50" r="50" fill="green"/> 
 
    </svg> 
 
</div>

yukarıdaki örnekte iki SVG açıklığı aynı olduğu

not edin.