Как применить обтравочный контур к контейнеру DIV

Question

Я пытаюсь создать своего рода индикатор выполнения, аналогичный тому, что делает Крис Койер здесь: https://css-tricks.com/css3-progress-bars/, за исключением того, что я хочу применить путь отсечения SVG к окружающему элементу div ,

Например, я хочу, чтобы применить путь SVG вырезанную в .rating-stars:

<div class="rating-stars"> 
    <span class="rating"></span> 
</div> 

Вы можете увидеть, что я до сих пор здесь: http://codepen.io/rleichty/pen/GrWmRR

Это не работает в Safari по какой-то причине , и я также не уверен, как изменить размер пути отсечения SVG (если это возможно).

Кто-нибудь знает, как я мог бы это сделать, или, возможно, иметь лучшее решение?

Answer 1

Выяснил это. Вот окончательный код здесь: http://codepen.io/rleichty/pen/zNZajM

HTML:

<div class='rating-container'> 
    <div class='rating-stars'> 
     <span class='rating'></span> 
    </div> 
</div> 

<svg width='0' height='0'> 
    <defs> 
     <clipPath id='svgStars' clipPathUnits = 'objectBoundingBox'> 
      <polygon points=".80 .073 .738 .118 .762 .19 .70 .145 .638 .19 .662 .118 .60 .073 .538 .118 .562 .19 .50 .145 .438 .19 .462 .118 .40 .073 .338 .118 .362 .19 .30 .145 .238 .19 .262 .118 .20 .073 .138 .118 .162 .19 .10 .145 .038 .19 .062 .118 0 .073 .076 .073 .10 0 .124 .073 .276 .073 .30 0 .324 .073 .476 .073 .50 0 .524 .073 .676 .073 .70 0 .724 .073 .876 .073 .90 0 .924 .073 1 .073 .938 .118 .962 .19 .90 .145 .838 .19 .862 .118 "/> 
     </clipPath> 
    </defs> 
</svg> 

CSS:

$ratingHeight: 100px; 

.rating-container { 
    position: relative; 
    width: calc((100/19) * #{$ratingHeight}); 
    height: $ratingHeight; 
} 

.rating-stars { 
    position: absolute; 
    width: 100%; 
    height: 0%; 
    padding-bottom: 100%; 
    background: lightgray; 
    -webkit-clip-path: url(#svgStars); 
    clip-path: url(#svgStars); 
    -webkit-clip-path: polygon(80% 7.3%, 73.8% 11.8%, 76.2% 19%, 70% 14.5%, 63.8% 19%, 66.2% 11.8%, 60% 7.3%, 53.8% 11.8%, 56.2% 19%, 50% 14.5%, 43.8% 19%, 46.2% 11.8%, 40% 7.3%, 33.8% 11.8%, 36.2% 19%, 30% 14.5%, 23.8% 19%, 26.2% 11.8%, 20% 7.3%, 13.8% 11.8%, 16.2% 19%, 10% 14.5%, 3.8% 19%, 6.2% 11.8%, 0 7.3%, 7.6% 7.3%, 10% 0, 12.4% 7.3%, 27.6% 7.3%, 30% 0, 32.4% 7.3%, 47.6% 7.3%, 50% 0, 52.4% 7.3%, 67.6% 7.3%, 70% 0, 72.4% 7.3%, 87.6% 7.3%, 90% 0, 92.4% 7.3%, 100% 7.3%, 93.8% 11.8%, 96.2% 19%, 90% 14.5%, 83.8% 19%, 86.2% 11.8%); 
    clip-path: polygon(80% 7.3%, 73.8% 11.8%, 76.2% 19%, 70% 14.5%, 63.8% 19%, 66.2% 11.8%, 60% 7.3%, 53.8% 11.8%, 56.2% 19%, 50% 14.5%, 43.8% 19%, 46.2% 11.8%, 40% 7.3%, 33.8% 11.8%, 36.2% 19%, 30% 14.5%, 23.8% 19%, 26.2% 11.8%, 20% 7.3%, 13.8% 11.8%, 16.2% 19%, 10% 14.5%, 3.8% 19%, 6.2% 11.8%, 0 7.3%, 7.6% 7.3%, 10% 0, 12.4% 7.3%, 27.6% 7.3%, 30% 0, 32.4% 7.3%, 47.6% 7.3%, 50% 0, 52.4% 7.3%, 67.6% 7.3%, 70% 0, 72.4% 7.3%, 87.6% 7.3%, 90% 0, 92.4% 7.3%, 100% 7.3%, 93.8% 11.8%, 96.2% 19%, 90% 14.5%, 83.8% 19%, 86.2% 11.8%); 
} 

.rating { 
    position: absolute; 
    display: block; 
    width: 50%; 
    height: 100%; 
    background-color: orange; 
} 

Вы можете регулировать высоту звезд, регулируя эту переменную SCSS $ratingHeight: 100px; Вы надеваете» t нужно использовать переменную, но это упрощает настройку только одного значения (вы также можете перевернуть его так, чтобы ширина была приоритетной).

Я нашел много помощи здесь https://sarasoueidan.com/blog/css-svg-clipping/, как она отмечает:

Одна важная вещь, чтобы отметить здесь, что при использовании значенияobjectBoundingBox, координаты указаны для содержания<clipPath>должен находиться в диапазоне [0, 1] - система координат становится единичной системой, а координаты фигур внутри clipPath должны быть фракциями в этом диапазоне.

Поэтому мне пришлось настроить координаты SVG на фракции.

Для того, чтобы сохранить соотношение сторон на основе обтравочного контура, я нашел помощь здесь How do I keep the aspect ratio of a percentage based clipping path? и просто использовал трюк padding-bottom.

Теперь все, что вам нужно сделать, это использовать jQuery для динамического набора ширины элемента .rating для представления рейтинга звезды. В моем случае я буду извлекать данные из Goodreads.

Лично мне нравится этот метод, а не отдельные изображения звезд для каждого рейтинга. Он более простой и легкий, а также векторный и отзывчивый.