Question

...

<svg>
  <defs>
    <symbol id="svg-rating-star">
      <!-- svg content -->
    </symbol>
  </defs>
</svg>

<span>case 1:</span>
<svg class="svg-rating-star" width="50" height="10" viewBox="10 0 50 10">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star"></use>
</svg>
<svg class="svg-rating-star" width="50" height="10" viewBox="20 0 50 10">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star"></use>
</svg>

<span>case 2:</span>
<svg class="svg-rating-star" width="50" height="10" viewBox="10 0 50 10">
  <!-- svg content -->
</svg>
<svg class="svg-rating-star" width="50" height="10" viewBox="20 0 50 10">
  <!-- svg content -->
</svg>

在demo

中更具体

在案例1中，svg的viewBox无法正常工作。它的视口确实在移动，但其余的星没有显示出来。

如果svg的内容在案例2中设置，它就可以完美地运行。

如何在案例1中为svgs设置viewBox？

Answer 1

您遇到的问题是，width元素的<use>值默认为"100%"（如果未指定）。在这种情况下，这意味着"50"，因为这是在两个<svg>元素上指定的内容。

因为它只有50，这意味着只会显示五颗金星。即使你改变了viewBox，你也只是移动那五颗金星。

解决方案是在width="100"元素上指定<use>，以便让所有星星都可见。

.svg-rating-star .svg-rating-star-active {
  fill: #fdcc00;
}
.svg-rating-star .svg-rating-star-inactive {
  fill: #d1d1d1;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
  <defs>
    <symbol id="svg-rating-star" class="svg-rating-star">
      <g id="svg-rating-star_svg-rating-star">
        <polygon class="svg-rating-star-active" points="4.732,0 6.194,2.963 9.463,3.438 7.098,5.745 7.656,9 4.732,7.463 1.807,9 2.366,5.745 0,3.438 3.269,2.963 "></polygon>
        <polygon class="svg-rating-star-active" points="14.732,0 16.194,2.963 19.463,3.438 17.098,5.745 17.656,9 14.732,7.463 11.807,9 12.366,5.745 10,3.438 13.269,2.963 "></polygon>
        <polygon class="svg-rating-star-active" points="24.732,0 26.194,2.963 29.463,3.438 27.098,5.745 27.656,9 24.732,7.463 21.807,9 22.365,5.745 20,3.438 23.27,2.963 "></polygon>
        <polygon class="svg-rating-star-active" points="34.732,0 36.194,2.963 39.463,3.438 37.098,5.745 37.656,9 34.732,7.463 31.807,9 32.365,5.745 30,3.438 33.27,2.963 "></polygon>
        <polygon class="svg-rating-star-active" points="44.732,0 46.194,2.963 49.463,3.438 47.098,5.745 47.656,9 44.732,7.463 41.807,9 42.365,5.745 40,3.438 43.27,2.963 "></polygon>
        <polygon class="svg-rating-star-inactive" points="54.732,0 56.194,2.963 59.463,3.438 57.098,5.745 57.656,9 54.732,7.463 51.807,9 52.365,5.745 50,3.438 53.27,2.963 "></polygon>
        <polygon class="svg-rating-star-inactive" points="64.732,0 66.194,2.963 69.463,3.438 67.098,5.745 67.656,9 64.732,7.463 61.807,9 62.365,5.745 60,3.438 63.27,2.963 "></polygon>
        <polygon class="svg-rating-star-inactive" points="74.732,0 76.194,2.963 79.463,3.438 77.098,5.745 77.656,9 74.732,7.463 71.807,9 72.365,5.745 70,3.438 73.27,2.963 "></polygon>
        <polygon class="svg-rating-star-inactive" points="84.732,0 86.194,2.963 89.463,3.438 87.098,5.745 87.656,9 84.732,7.463 81.807,9 82.365,5.745 80,3.438 83.27,2.963 "></polygon>
        <polygon class="svg-rating-star-inactive" points="94.732,0 96.194,2.963 99.463,3.438 97.098,5.745 97.656,9 94.732,7.462 91.807,9 92.365,5.745 90,3.438 93.27,2.963 "></polygon>
      </g>
    </symbol>
  </defs>
</svg>

<svg class="svg-rating-star" width="50" height="10" viewBox="10 0 50 10">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" width="100"/>
</svg>
<br/>
<svg class="svg-rating-star" width="50" height="10" viewBox="20 0 50 10">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" width="100"/>
</svg>

Answer 2

我认为这里唯一的方法是将一条路径复制到不同的ID：

.svg-rating-star-inactive {
  fill: #d1d1d1;
}

.svg-rating-star-active {
  fill: #fdcc00;
}

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
      <defs>
        <symbol id="svg-rating-star">
          <polygon points="4.732,0 6.194,2.963 9.463,3.438 7.098,5.745 7.656,9 4.732,7.463 1.807,9 2.366,5.745 0,3.438 3.269,2.963 "></polygon>
        </symbol>
        <symbol id="svg-rating-star0">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="0" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="10" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="20" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="30" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="40" class="svg-rating-star-inactive"></use>
        </symbol>
        <symbol id="svg-rating-star1">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="0" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="10" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="20" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="30" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="40" class="svg-rating-star-inactive"></use>
        </symbol>
        <symbol id="svg-rating-star2">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="0" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="10" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="20" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="30" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="40" class="svg-rating-star-inactive"></use>
        </symbol>
        <symbol id="svg-rating-star3">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="0" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="10" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="20" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="30" class="svg-rating-star-inactive"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="40" class="svg-rating-star-inactive"></use>
        </symbol>
        <symbol id="svg-rating-star4">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="0" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="10" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="20" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="30" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="40" class="svg-rating-star-inactive"></use>
        </symbol>
        <symbol id="svg-rating-star5">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="0" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="10" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="20" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="30" class="svg-rating-star-active"></use>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star" x="40" class="svg-rating-star-active"></use>
        </symbol>
      </defs>
    </svg>
    <br/>
    <svg width="50" height="10" viewBox="0 0 50 10">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star0"></use>
    </svg>
    <br/>
    <svg width="50" height="10" viewBox="0 0 50 10">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star1"></use>
    </svg>
    <br/>
    <svg width="50" height="10" viewBox="0 0 50 10">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star2"></use>
    </svg>
    <br/>
    <svg width="50" height="10" viewBox="0 0 50 10">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star3"></use>
    </svg>
    <br/>
    <svg width="50" height="10" viewBox="0 0 50 10">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star4"></use>
    </svg>
    <br/>
    <svg width="50" height="10" viewBox="0 0 50 10">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-rating-star5"></use>
    </svg>

如何使用'use'标签为svg设置viewBox属性？

2 个答案: