Wie ändere ich die Größe einer Svg?

Ich versuche, die folgenden svg s nebeneinander anzuzeigen, aber es sieht so aus, als ob sie die Größe nicht proportional ändern, sobald der Container eng wird. Ich versuchte mit preserveAspectRatio auf der symbol, aber das scheint einfach die Svg innerhalb des Containers auszurichten.Wie ändere ich die Größe einer Svg?

.stars { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: blue; 
 
} 
 

 
.star { 
 
    width: 18%; 
 
}

<svg style="display:none;"> 
 
    <symbol id="star" viewBox="0 0 992.13 945.383"> 
 
     <path fill="#F89838" d="M495.844.165c7.74-.957 14.046 2.317 18.812 7.944 3.975 4.693 7.522 9.955 10.256 15.463 43.75 88.155 87.396 176.36 130.81 264.68 2.617 5.322 5.912 7.364 11.415 8.154 69.738 10.02 139.453 20.197 209.173 30.347 28.152 4.098 56.33 8.032 84.425 12.49 6.248.99 12.58 3.135 18.203 6.042 12.05 6.228 16.57 18.336 10.513 30.486-3.873 7.77-9.527 15.062-15.745 21.184-49.78 49.012-99.885 97.695-149.893 146.476-19.908 19.42-39.77 38.884-59.8 58.18-2.86 2.756-3.798 5.24-3.097 9.263C771.55 671.95 781.99 733.06 792.49 794.16c6.286 36.574 12.824 73.106 18.692 109.745 1.132 7.07.674 14.763-.785 21.81-3.15 15.218-14.692 22.285-29.89 18.79-5.766-1.326-11.482-3.572-16.736-6.324C676.586 892.5 589.455 846.71 502.41 800.76c-4.675-2.468-8.086-2.47-12.765 0-85.87 45.32-171.84 90.455-257.81 135.58-4.512 2.368-9.103 4.72-13.896 6.392-23.697 8.265-41.205-5.358-38.025-30.316 2.78-21.805 6.855-43.45 10.568-65.13 12.603-73.59 24.73-147.27 38.407-220.662 2.98-15.997-.78-25.543-12.282-36.525C150.31 526.8 84.845 462.633 19.29 398.567c-5.81-5.677-11.155-12.242-15.147-19.283-8.553-15.088-3.645-30.02 12.75-35.668 12.667-4.364 26.293-6.275 39.642-8.27 60.228-8.997 120.51-17.648 180.774-26.4 29.032-4.217 58.054-8.52 87.127-12.45 5.823-.787 9.258-2.85 11.983-8.395 43.206-87.927 86.623-175.75 130.195-263.498 3.117-6.278 7.34-12.17 11.898-17.52 4.298-5.05 10.267-7.744 17.33-6.917z"/> 
 
    </symbol> 
 
</svg> 
 

 
<div class="stars"> 
 
    <svg class="star"><use xlink:href="#star"></use> </svg> 
 
    <svg class="star"><use xlink:href="#star"></use> </svg> 
 
    <svg class="star"><use xlink:href="#star"></use> </svg> 
 
    <svg class="star"><use xlink:href="#star"></use> </svg> 
 
    <svg class="star"><use xlink:href="#star"></use> </svg> 
 
</div>

Quelle

2017-02-21 321zeno

Ich denke, du solltest deine viewBox Grenzen auf die einzelnen SVG Elemente mit 'use' Elementen setzen. – imhotap

Eigentlich funktioniert das nur wenn ich' display: flex' entferne, sorry – 321zeno

Wie ich bereits in den Kommentar geschrieben (und ein wenig zu erweitern), viewBox müssen mit den use Elemente zB auf die einzelnen svg Elemente gesetzt werden.

<div class="stars"> 
    <svg class="star" viewBox="0 0 992.13 945.383"> 
    <use xlink:href="#star"></use> 
    </svg> 
    <svg class="star" viewBox="0 0 992.13 945.383"> 
    <use xlink:href="#star"></use> 
    </svg> 
    ... 
</div>

Edit: für Flexbox, versuchen, eine div um svg setzen, wie here erklärt

Quelle

2017-02-21 18:42:37 imhotap

Sieht so aus als würde ich den Job aber nur entfernen : flex 'aus dem übergeordneten Container. – 321zeno

Danke für das Update, die extra Divs haben den Job gemacht! – 321zeno

Generell finde ich, dass Sie SVG haben Breite manuell in JavaScript setzen.

function resizeSvgs() { 
    var starsWidth = $(window).innerWidth * .18;//get the percentage from the width 
    $(".stars").css({width:starsWidth}); 
} 

resizeSvgs(); 

$(window).resize(resizeSvgs);

Ich verwendete jQuery. Ich würde es sehr empfehlen, es zu benutzen. Es ist ziemlich Standard und spart Ihnen Stunden Zeit.

Quelle

2017-02-21 18:45:46 Neil

Wie ändere ich die Größe einer Svg?

Antwort

Verwandte Themen