всем привет, есть спидометр в виде полукрулого прогресс бара, как расчитать формулу stroke-dashoffset для него?
HTML:
<template>
<svg width="290" height="220" xmlns="http://www.w3.org/2000/svg" fill="none">
<path class="grey" d="m25.47986,206.1125a136.767,129.8702 0 1 1 239.4794,-1.6251" fill="none"/>
<path :style='{strokeDashoffset: 838 - (props.progress / props.maxProgress * 120) * 3.45}' id="blue" fill="none" class="blue" d="m25.47986,206.1125a136.767,129.8702 0 1 1 239.4794,-1.6251"/>
</svg>
</template>
<script setup lang='ts'>
const props = defineProps({
progress: {
type: Number,
required: true
},
maxProgress: {
type: Number,
required: true,
}
})
</script>
<style scoped lang='scss'>
svg {
background: radial-gradient(46.14% 46.14% at 50% 50%, rgba(0, 0, 0, 0.6) 52.27%, rgba(0, 0, 0, 0) 100%);
}
path {
stroke-linecap: round;
stroke-width: 8;
}
path.grey {
stroke: rgba(0, 0, 0, 0.5);
}
path.blue {
stroke: #FFC01D;
stroke-dasharray: 838;
}
</style>