Question

我试图在另一个旁边显示以下svg，但看起来一旦容器变窄，它们不会按比例调整大小。我尝试在preserveAspectRatio上使用symbol，但这似乎只是将svg对齐在容器中。

＆＃13;

.stars {
    display: flex;
    justify-content: space-between;
    background: blue;
}

.star {
    width: 18%;
}

＆＃13;

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

＆＃13;

Answer 1

正如我已经在评论中写的那样（并且稍微扩展一下），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>

修改：对于flexbox，请尝试按div svg进行解释here

Answer 2

一般来说，我发现你必须在JavaScript中手动设置svg的宽度。

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

resizeSvgs();

$(window).resize(resizeSvgs);

我使用了jQuery。我强烈建议使用它。这是非常标准的，可以节省你的时间。

如何正确调整svg的大小？

2 个答案: