2

Имеется 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 горизонтально в ряд?

0

1 ответ 1

4

Для копирования элементов 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>

8
  • @MaximLensky что <defs>, что <symdol> работают одинаково, - сначала прячем, потом вызываем по ID если не влом, дай ссылку, посмотрю 14 апр 2020 в 8:52
  • 1
    @MaximLensky чуваки, читают раскрученные сайты типа css-tricks, где настоятельно рекомендуется использование SVG только, как background, а это самый плохой способ применения SVG, так как нет стилизации, интерактивности, адаптивности, кроче всех плюшек SVG зачем тогда применять SVG? Можно сразу ставить картинку на background 14 апр 2020 в 9:01
  • @Alexandr_TT, выдало ошибку, как это можно исправить? error on line 8 at column 40: Namespace prefix xlink for href on use is not defined
    – word
    14 апр 2020 в 9:01
  • Добавьте в шапку svg xmlns:xlink="w3.org/1999/xlink Сейчас дополню ответ 14 апр 2020 в 9:03
  • мне кажется здесь удобнее - я удалил всё 14 апр 2020 в 9:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.