как заставить SVG показывать указанный c номер пути внутри него - PullRequest
Новая
       3

как заставить SVG показывать указанный c номер пути внутри него

0 голосов
/ 26 апреля 2020

Я хочу показать конкретные c количество звездочек внутри div 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206 38" class="star-rating star-off">
<path d="M31.86,1H6.14A5.15,5.15,0,0,0,1,6.14V31.86A5.15,5.enter code here15,0,0,0,6.14,37H31.86A5.15,5.15,0,0,0,37,31.86V6.14A5.15,5.15,0,0,0,31.86,1Zm-7.3,27L19,24.93,13.44,28l1.06-6.51L10,16.88l6.22-.95L19,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
<path d="M73.86,1H48.14A5.15,5.15,0,0,0,43,6.14V31.86A5.15,5.15,0,0,0,48.14,37H73.86A5.15,5.15,0,0,0,79,31.86V6.14A5.15,5.15,0,0,0,73.86,1Zm-7.3,27L61,24.93,55.44,28l1.06-6.51L52,16.88l6.22-.95L61,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
<path d="M115.86,1H90.14A5.15,5.15,0,0,0,85,6.14V31.86A5.15,5.15,0,0,0,90.14,37h25.72A5.15,5.15,0,0,0,121,31.86V6.14A5.15,5.15,0,0,0,115.86,1Zm-7.3,27L103,24.93,97.44,28l1.06-6.51L94,16.88l6.22-.95L103,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
<path d="M157.86,1H132.14A5.15,5.15,0,0,0,127,6.14V31.86A5.15,5.15,0,0,0,132.14,37h25.72A5.15,5.15,0,0,0,163,31.86V6.14A5.15,5.15,0,0,0,157.86,1Zm-7.3,27L145,24.93,139.44,28l1.06-6.51L136,16.88l6.22-.95L145,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
<path d="M199.86,1H174.14A5.15,5.15,0,0,0,169,6.14V31.86A5.15,5.15,0,0,0,174.14,37h25.72A5.15,5.15,0,0,0,205,31.86V6.14A5.15,5.15,0,0,0,199.86,1Zm-7.3,27L187,24.93,181.44,28l1.06-6.51L178,16.88l6.22-.95L187,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
Tags

1 Ответ

0 голосов
/ 26 апреля 2020

Вложенный svg-тег позволяет позиционировать, см.

https://www.jotform.com/blog/better-positioning-and-transforming-with-nested-svgs/

Я использовал только первую звезду из вашего SVG и поместил 3 звезды в DIV, с относительными координатами "x" и "y".

Ниже мой html. Поместите часть div в ваш .cs html и обработайте регистр для 1,2,3,4 звезд, например, используя @if (условие) {} 

<html>
<body>
<div>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206 38" class="star-rating star-off">
  <svg x="-35" y="0"> 
    <path d="M73.86,1H48.14A5.15,5.15,0,0,0,43,6.14V31.86A5.15,5.15,0,0,0,48.14,37H73.86A5.15,5.15,0,0,0,79,31.86V6.14A5.15,5.15,0,0,0,73.86,1Zm-7.3,27L61,24.93,55.44,28l1.06-6.51L52,16.88l6.22-.95L61,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
  </svg>
  <svg x="5" y="0"> 
    <path d="M73.86,1H48.14A5.15,5.15,0,0,0,43,6.14V31.86A5.15,5.15,0,0,0,48.14,37H73.86A5.15,5.15,0,0,0,79,31.86V6.14A5.15,5.15,0,0,0,73.86,1Zm-7.3,27L61,24.93,55.44,28l1.06-6.51L52,16.88l6.22-.95L61,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
  </svg>
  <svg x="45" y="0"> 
    <path d="M73.86,1H48.14A5.15,5.15,0,0,0,43,6.14V31.86A5.15,5.15,0,0,0,48.14,37H73.86A5.15,5.15,0,0,0,79,31.86V6.14A5.15,5.15,0,0,0,73.86,1Zm-7.3,27L61,24.93,55.44,28l1.06-6.51L52,16.88l6.22-.95L61,10l2.78,5.93,6.22.95-4.5,4.61Z"></path>
  </svg>
 </svg>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...