[JS] SVG 이미지 이용한 별점 기능 제작 (0.1 단위)

// 그누보드의 최근게시물 기능에 이용하기 위해 작성하였다.

starrating (1).zip

0.00MB

star (1).zip

0.00MB

    .rating-wrap{
        padding: 10px;
        display: flex;
    }
    .rating {
        display: flex;
        align-items: center;
        position: relative;
    }
    .starcolor{
        fill: #1976d2;
    }
    .overlay {
        background-color: #000;
        opacity: 0.5;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        transition: all 0.3s ease-in-out;
    }
    @supports (mix-blend-mode: color) {
        .overlay{
            mix-blend-mode: color;
            opacity: unset;
        }
    }

<script>
    const starSize = 30, maxStar = 5, gutter = 5;//별 크기, 별 개수
    let maskMax = 0; //오버레이 마스크 최대 너비

    function setRating(n,maskMax,val = 0){
        document.querySelector('.overlay'+n).style.width = parseInt(maskMax - val * 30 - Math.floor(val) * 2) + 'px';//마스크 크기 변경해서 별점 마킹
    }
</script>

<?
$i = 0;
?>
<div class="d-flex" style="justify-content: space-between;">
<?
echo '<a href="'.$href.'">'.$list[$i]['wr_subject'].'</a>';
?>
<div>
    <div class="rating rating<?= $i ?>">
        <div class="overlay overlay<?= $i ?>"></div>
    </div>
</div>
<script>
    window.addEventListener('DOMContentLoaded',()=>{
        //별 이미지 SVG 개수만큼 생성
        const n = <?= $i ?>;
        let wr_4 = 4.5'; // 점수
        for(let i = 0;i < maxStar;i++){
            let el = document.createElement('div');
            el.style.width = '20px';
            el.style.height = '20px';
            el.style.marginRight = '2px';
            //인라인 SVG 이미지 부착
            el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="none" class="starcolor" d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg>';
            document.querySelector('.rating'+n).appendChild(el);
        }
        maskMax = parseInt(30 * 5 + 2 * (5-1));//최대 마스크 너비 계산
        setRating(n,maskMax,parseFloat(wr_4));
    })
</script>
</div>