'use'タグを使ってsvgのviewBox属性を設定する方法は？

Question

...ケース1でdemo

で

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

より具体的な、SVGのビューボックスは、私が期待通りに動作していません。ビューポートは移動しますが、残りの星は表示されません。

ケース2のようにsvgのコンテンツが設定されていると、完全に機能します。

ケース1のsvgsのviewBoxを設定するにはどうすればよいですか？

Answer 1

あなたが抱えている問題があるため、<use>要素のデフォルトのwidth値指定されていない場合は"100%"になります。この場合は、"50"を意味します。これは、2つの<svg>要素で指定されているためです。

これはわずか50であるため、5つの金色の星しか表示されません。 viewBoxを変更した場合でも、それらの5つの金星だけを左にシフトしているだけです。

あなたの<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の1つのパスを複製することであると思う：

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