Wie setze ich das viewBox-Attribut für svg mit 'use' tag?

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> 

präziser in demo

im Fall 1, arbeitet viewBox des svg nicht, wie ich erwartet hatte. Das Ansichtsfenster bewegt sich, aber die übrigen Sterne werden nicht angezeigt.

Wenn der Inhalt des SVG wie in Fall 2 eingestellt ist, funktioniert es perfekt.

Wie setze ich viewBox für die SVGs in Fall 1?

Answer 1

Das Problem ist, die Sie haben, weil der width Wert eines <use> Element defaults zu "100%", wenn es nicht angegeben ist. In diesem Fall bedeutet das "50", denn das ist, was auf den zwei <svg> Elementen angegeben ist.

Weil es nur 50 ist, bedeutet das, dass nur die fünf goldenen Sterne jemals gezeigt werden. Selbst wenn Sie die viewBox ändern, verschieben Sie nur diese fünf verbleibenden goldenen Sterne.

Die Lösung besteht darin, einen width="100" auf Ihrem <use> Elemente anzugeben, so dass alle Sterne sichtbar gemacht werden.

.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

Ich denke, dass der einzige Weg, hier ist ein Weg, um unterschiedliche IDs zu duplizieren:

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