Как скопировать несколько раз горизонтально svg?

Question

Имеется svg звезда для отображения рейтинга, и нужно повторить его горизонтально несколько раз.
И чтобы можно было регулировать отступы между звёздами с помощью css.
Как можно скопировать в горизонтальную линию svg с определёнными отступами?

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style type="text/css">
.st0{fill:#ffff00;}
</style>
<path class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>

Или хотя-бы подскажите, как можно настроить отступы в теге path чтобы можно было скопировать тег path и поставить нужный отступ?
Возможно нужно будет применять другой svg, можете подсказать, как можно копировать svg горизонтально в ряд?

Answer 1

Для копирования элементов svg существует команда <use>
Для этого надо разместить элемент в секцию <defs> и клонировать этот элемент с помощью <use>

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" >
<style type="text/css">
.st0{fill:gold;}
</style>
<defs>
<path id="star" class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</defs>
<use  xlink:href="#star" x="10" y="0"  />
 <use  xlink:href="#star" x="35" y="0"  />
   <use  xlink:href="#star" x="60" y="0"  /> 
     <use  xlink:href="#star" x="85" y="0"  />
        <use  xlink:href="#star" x="110" y="0"  />
</svg>

БЛОГ НА HUSL

Как скопировать несколько раз горизонтально svg?

Ответы (1 шт):