javascript - 带有点边界的Javascript六边形头像

Question

我正在尝试做的事情：我有一个带有六边形边框的头像：

    .user-avatar-holder{
background: #141519;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 25px auto; */
    clip-path: polygon( 47.5% 5.66987%, 48.2899% 5.30154%, 49.13176% 5.07596%, 50% 5%, 50.86824% 5.07596%, 51.7101% 5.30154%, 52.5% 5.66987%, 87.14102% 25.66987%, 87.85495% 26.16978%, 88.47124% 26.78606%, 88.97114% 27.5%, 89.33948% 28.2899%, 89.56505% 29.13176%, 89.64102% 30%, 89.64102% 70%, 89.56505% 70.86824%, 89.33948% 71.7101%, 88.97114% 72.5%, 88.47124% 73.21394%, 87.85495% 73.83022%, 87.14102% 74.33013%, 52.5% 94.33013%, 51.7101% 94.69846%, 50.86824% 94.92404%, 50% 95%, 49.13176% 94.92404%, 48.2899% 94.69846%, 47.5% 94.33013%, 12.85898% 74.33013%, 12.14505% 73.83022%, 11.52876% 73.21394%, 11.02886% 72.5%, 10.66052% 71.7101%, 10.43495% 70.86824%, 10.35898% 70%, 10.35898% 30%, 10.43495% 29.13176%, 10.66052% 28.2899%, 11.02886% 27.5%, 11.52876% 26.78606%, 12.14505% 26.16978%, 12.85898% 25.66987% );
    position: relative;
    overflow: hidden;
    float: left;
}
.profile-image-outer{
    background: #141519;
    width: 100px;
    height: 100px;
    clip-path: polygon( 47.5% 5.66987%, 48.2899% 5.30154%, 49.13176% 5.07596%, 50% 5%, 50.86824% 5.07596%, 51.7101% 5.30154%, 52.5% 5.66987%, 87.14102% 25.66987%, 87.85495% 26.16978%, 88.47124% 26.78606%, 88.97114% 27.5%, 89.33948% 28.2899%, 89.56505% 29.13176%, 89.64102% 30%, 89.64102% 70%, 89.56505% 70.86824%, 89.33948% 71.7101%, 88.97114% 72.5%, 88.47124% 73.21394%, 87.85495% 73.83022%, 87.14102% 74.33013%, 52.5% 94.33013%, 51.7101% 94.69846%, 50.86824% 94.92404%, 50% 95%, 49.13176% 94.92404%, 48.2899% 94.69846%, 47.5% 94.33013%, 12.85898% 74.33013%, 12.14505% 73.83022%, 11.52876% 73.21394%, 11.02886% 72.5%, 10.66052% 71.7101%, 10.43495% 70.86824%, 10.35898% 70%, 10.35898% 30%, 10.43495% 29.13176%, 10.66052% 28.2899%, 11.02886% 27.5%, 11.52876% 26.78606%, 12.14505% 26.16978%, 12.85898% 25.66987% );
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-image{
    background: #141519;
    width: 90px;
    height: 90px;
    clip-path: polygon( 47.5% 5.66987%, 48.2899% 5.30154%, 49.13176% 5.07596%, 50% 5%, 50.86824% 5.07596%, 51.7101% 5.30154%, 52.5% 5.66987%, 87.14102% 25.66987%, 87.85495% 26.16978%, 88.47124% 26.78606%, 88.97114% 27.5%, 89.33948% 28.2899%, 89.56505% 29.13176%, 89.64102% 30%, 89.64102% 70%, 89.56505% 70.86824%, 89.33948% 71.7101%, 88.97114% 72.5%, 88.47124% 73.21394%, 87.85495% 73.83022%, 87.14102% 74.33013%, 52.5% 94.33013%, 51.7101% 94.69846%, 50.86824% 94.92404%, 50% 95%, 49.13176% 94.92404%, 48.2899% 94.69846%, 47.5% 94.33013%, 12.85898% 74.33013%, 12.14505% 73.83022%, 11.52876% 73.21394%, 11.02886% 72.5%, 10.66052% 71.7101%, 10.43495% 70.86824%, 10.35898% 70%, 10.35898% 30%, 10.43495% 29.13176%, 10.66052% 28.2899%, 11.02886% 27.5%, 11.52876% 26.78606%, 12.14505% 26.16978%, 12.85898% 25.66987% );
    position: relative;
    overflow: hidden;
}
.profile-image img{
width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.skill-bar {
position: absolute;
    top: 50%;
    background: transparent;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
}
.skill {
    width: 100%;
    height: 100%;
    background: transparent;
}
.skill .track,
.skill .fill {
    fill: rgba(0, 0, 0, 0);
    stroke-width: 40;
    transform: translate(75px, 685px) rotate(-90deg);
}
.skill .track {
    stroke: #293249;
}
.skill .fill {
    stroke: #5BD853;
    stroke-linecap: round;
    stroke-dasharray: 2160;
    stroke-dashoffset: 2160;
    transition: stroke-dashoffset 1s;
    stroke-linejoin: round; /*Added this css*/
}
.skill .blue .fill {
    stroke: #ffca34;
    stroke-linejoin: round; /*Added this css*/
}

HTML 代码：

<div class="user-avatar-holder">
                        <div class="skill-bar">
                            <svg class="skill blue noselect" x="0px" y="0px" viewBox="0 0 776 628">
                                <path class="track" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
                                <path class="fill" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
                            </svg>
                        </div>
                        <div class="profile-image-outer">
                            <div class="profile-image">
                                <img src="/img/default/no_user-150.png" alt="" width="100" height="100" >
                            </div>
                        </div>
                    </div>

JS：

                    <script type="text/javascript">
    let max = 9000;
    let progress = {{ $user->points }};
    document.querySelector(".fill").setAttribute(
    "style",
    "stroke-dashoffset: " + ((100 - progress) / 100) * max);
</script>

所以我需要边界进入百分比。示例：最大积分为 9000。用户有 1000 积分。所以 .skill .fill 应该是 90%。有什么资料吗？

更多解释我需要： https ://codepen.io/rahul0310/pen/zYBamEJ

像进度条一样，但我们的最大数量是 9000，用户点数是 1000。所以 90% 的百分比不应该填满。

标签： javascriptcss