CSS SVG 별점 ⭐️

오늘 우리는 SVG 기반 별 등급을 만드는 방법을 살펴볼 것입니다.
이 예에서는 세 가지 유형의 별을 사용합니다. (비어 있음. 절반, 꽉 찼음).

그런 다음 특정 등급을 표시하기 위해 사용하는 방법에 대한 몇 가지 예를 보여드리겠습니다.

이 Codepen에서 볼 수 있듯이 최종 결과입니다.

SVG 세트 만들기

언급한 바와 같이 우리는 세 가지 버전을 사용할 것이며 이를 달성하기 위해 SVG Sprites을 사용할 것입니다.

<svg id="stars" style="display: none;" version="1.1">
  <symbol id="stars-empty-star" viewBox="0 0 102 18" fill="#F1E8CA">
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
  </symbol>
  <symbol id="stars-full-star" viewBox="0 0 102 18" fill="#D3A81E">
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
  </symbol>
  <symbol id="stars-half-star" viewBox="0 0 102 18" fill="#D3A81E">
    <use xlink:href="#stars-empty-star" />
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792" />
  </symbol>
</svg>

보시다시피 다음이 있습니다.

stars-empty-star: 이것은 매우 밝은 금색 배경을 가지고 있습니다.

stars-ful-star: 이것은 실제로 모양은 같지만 색상이 다릅니다.

stars-half-star: 하단의 빈 별과 그 위에 있는 반별의 조합입니다.

그것이 우리의 소스가 될 것이고 우리는 이것을 다음과 같은 방법으로 사용할 수 있습니다.

SVG 별 사용

물론 주요 질문은 이제 어떻게 스타를 선보일 수 있습니까?

빈 별을 표시하고 싶다고 가정해 보겠습니다.

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-empty-star" />
</svg>

또는 만점:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-full-star" />
</svg>

또는 반성:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-half-star" />
</svg>

작동합니다. 굉장합니다!

그러나 이제 우리는 별점 5개 등급 구성 요소를 만들고 싶고 SVG는 서로의 위에서 크롤링하는 경향이 있습니다.

따라서 다음 코드가 있는 경우:

<!-- 2.5 Rating -->
<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-full-star" />
  <use xlink:href="#stars-full-star" />
  <use xlink:href="#stars-half-star" />
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-empty-star" />
</svg>

모두 다음과 같이 앉는 경우:



흠, 이상해? 별이 하나만 표시되나요?
옳은!

이를 해결하기 위해 CSS를 사용하겠습니다.

use {
  &:nth-child(2) {
    transform: translate(20px);
  }
  &:nth-child(3) {
    transform: translate(40px);
  }
  &:nth-child(4) {
    transform: translate(60px);
  }
  &:nth-child(5) {
    transform: translate(80px);
  }
}

x 자식마다 20px 오프셋 위치를 제공합니다.

이제 우리는 이것을 얻습니다:



Codepen에서 나머지 조합을 찾을 수 있습니다!

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나