如何正確調整svg大小？

我試圖顯示下面的svg，但它看起來像一旦容器變窄，它們不會按比例調整大小。我嘗試在symbol上使用preserveAspectRatio，但似乎只是簡單地對齊容器內的svg。如何正確調整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>

來源

2017-02-21 321zeno

我認爲你應該把你的viewBox邊界放到包含'use'元素的單個SVG元素上 – imhotap

其實這隻有當我刪除'display：flex'時纔有效，對不起 – 321zeno

正如我在評論已經寫（和擴展位），viewBox必須放到含有use元素如個人svg元素。

<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>

編輯：爲實現Flexbox，嘗試把一個div各地svg作爲解釋here

來源

2017-02-21 18:42:37 imhotap

看起來像這樣做，但只有當我移除'display ：來自父容器的flex。 – 321zeno

感謝您的更新，額外的div做了這份工作！ – 321zeno

一般來說，我發現，你必須手動設置SVG的寬度在JavaScript。

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

resizeSvgs(); 

$(window).resize(resizeSvgs);

我用jQuery。我強烈建議使用它。這是相當標準的，可以節省您的時間。

來源

2017-02-21 18:45:46 Neil

如何正確調整svg大小？

回答

相關問題