Как правильно изменить размер svg?

Я пытаюсь показать следующие svg s рядом с другим, но похоже, что они не изменяются пропорционально, когда контейнер становится узким. Я попытался использовать preserveAspectRatio на symbol, но, похоже, просто выравнивает 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 на отдельные элементы SVG, содержащие элементы 'use' – imhotap

На самом деле это работает только при удалении' display: flex', извините – 321zeno

Как я уже писал в комментариях (и расширить немного), viewBox необходимо положить на отдельных svg элементов, содержащих элементы use например.

<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: для Flexbox, попробуйте положить div вокруг svg, как описано here

источник

2017-02-21 18:42:37 imhotap

Похоже, что это делает работу, но только если я удаляю 'display : flex' из родительского контейнера. – 321zeno

Спасибо за обновление, дополнительные divs сделали работу! – 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?

ответ

Смежные вопросы