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

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 中为 svg 设置 viewBox？

Answer 1

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

因为只有 50，这意味着永远只会显示五颗金星。即使更改 viewBox，也只是将那五颗金星向左移动。

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

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