svg로 절반의 별을 어떻게 재현할까

흔한 svg로 별이 반으로 그려진 상태를 재현하는 방법을 생각한다.

방법 1. 절반 별 상태 준비

매우 솔직. 만들 수 있다면 좋을 것 같습니다.

방법 2. viewBox를 이동하고 색상을 반으로 겹쳐

상당히 원했던 녀석. 좌우로 배치한다.

star.svg.xml

<svg width="16" height="16" viewBox="0 0 16 16">
  <!-- left -->
  <svg width="8" height="16" viewBox="0 0 8 16">
    <use xlink:href="star.svg#star" fill="orange" />
  </svg>
  <!-- right -->
  <svg width="8" height="16" viewBox="0 0 8 16" x=8>
    <use x="-8" xlink:href="star.svg#star" fill="#ddd" />
  </svg>
</svg>

응용: stroke로 일부 채우기 촉촉하게 한다

stroke만 하고 있는 오른쪽을 만든다. stroke 분 1px씩 어긋나거나 세공한다

star.svg.xml

<svg width="16" height="16">
  <svg width="8" height="16" viewBox="0 0 9 18">
    <use x="1" y="1" xlink:href="star.svg#star" fill="orange" stroke="orange" />
  </svg>
  <svg width="8" height="16" viewBox="0 0 9 18" x="8">
    <use y=1 x="-8" xlink:href="star.svg#star" fill="transparent" stroke="orange"/>
  </svg>
</svg>

방법 2의 봇안

한쪽을 viewbox로 어긋나지 않고 위로 당기는 방법이라면 코드량은 줄어들지만, 쟈기가 나와 버려 이마이치한 느낌이 되지만, 참고까지 게재


봇안.svg.xml

    <svg width="16" height="16" viewBox="0 0 16 16">
      <use xlink:href="star.svg#star" fill="orange" />
      <svg width="8" height="16" viewBox="0 0 8 16" x=8>
        <use x="-8" xlink:href="star.svg#star" fill="#ddd" />
      </svg>
    </svg>

방법 3. preserveAspectRatio를 사용하여 절반 채우기

방법 2 쪽이 스마트하지만, preserveAspectRatio를 사용해도 재현할 수 있다
(쓰고 나서 깨달았지만 아무래도 IE11에서 잘 어울릴 것 같아・・・)

star.svg.xml

<svg width="16" height="16" viewBox="0 0 16 16">
  <!-- left -->
  <svg 
    width="8" height="16"
    preserveAspectRatio="slice xMinYMin">
    <use xlink:href="star.svg#star" fill="orange" />
  </svg>
  <!-- right -->
  <svg 
    x="8"
    width="8" height="16"
    preserveAspectRatio="slice xMaxYMax">
    <!-- x位置をずらす -->
    <use x="-8" xlink:href="star.svg#star" fill="#ddd" />
  </svg>
</svg>

방법 4. color와 fill 사용

이 기사 을 참고로 currentColor 를 이용해 해킹한다.
이 방법의 경우 방법 2,3과 같이 간단한 path가 아닌 원래 svg의 path를 분리합니다.

star.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <svg id="star" viewBox="0 0 16 16" >
            <path class="star-left" d="M-右半分のpath"/>
            <path class="star-right"
                fill="currentColor" d="M-左半分のpath"/>
        </svg>
    </defs>
</svg>

전화는 이런 느낌

usage.svg

<svg class="rating-star" width="20" height="20"> 
  <use class="half" xlink:href="star.svg#star">
</svg>

그리고 css에서 fill과 color를 지정합니다.

.rating-star .half{
  fill: orange;
  color: gray;
}

기타 방법

코멘트 란에서 :

Gradient나 Pattern을 이용한 방법을 가르쳐 주셨습니다
참고 : SVG로 절반만 칠한 별을 재현