SVG полукруг разбить на 3 равные части
1,00
р.
У меня приложение на Vue.js и мне нужно прогресс-бар создать. Я использую Svg, потому что другие варианты не подойдут. Как можно разбить SVG-полукруг на равные части. У меня получается сплошная линия. Пытался манипулировать атрибутом stroke-dasharray, но не получается. Необходимо получить такой вид:
я пока добился такого
мой код:
Ответ
Самый простой вариант, если фон белый, можно закрыть 2мя белыми линиями, идущими от центра:
requestAnimationFrame(draw)
function draw(dt) {
document.querySelector('.meter').setAttribute('stroke-dasharray', `${dt/10%100}, 100`)
requestAnimationFrame(draw)
}
Вариант с масками
Тут для бордера используется другая фигура, с большей толщиной линии, от которой маской мы отрезаем ненужное:
+
=
Результат:
let meter = document.querySelector('path.meter')
let text = document.querySelector('text')
let arrow = document.querySelector('path.arrow')
let length = meter.getTotalLength()
requestAnimationFrame(draw)
function draw(dt) {
progress(dt / 100 % 100)
requestAnimationFrame(draw)
}
function progress(value) {
meter.setAttribute('stroke-dasharray', `${length/100*value}, ${length}`)
arrow.setAttribute('transform', `rotate(${-135+value*270/100} 100,100)`)
text.innerHTML = Math.round(value)
}
0
UPD: сделал как в вопросе, с циферками и стрелочкой
я пока добился такого
мой код:
Ответ
Самый простой вариант, если фон белый, можно закрыть 2мя белыми линиями, идущими от центра:
requestAnimationFrame(draw)
function draw(dt) {
document.querySelector('.meter').setAttribute('stroke-dasharray', `${dt/10%100}, 100`)
requestAnimationFrame(draw)
}
Вариант с масками
Тут для бордера используется другая фигура, с большей толщиной линии, от которой маской мы отрезаем ненужное:
+
=
Результат:
let meter = document.querySelector('path.meter')
let text = document.querySelector('text')
let arrow = document.querySelector('path.arrow')
let length = meter.getTotalLength()
requestAnimationFrame(draw)
function draw(dt) {
progress(dt / 100 % 100)
requestAnimationFrame(draw)
}
function progress(value) {
meter.setAttribute('stroke-dasharray', `${length/100*value}, ${length}`)
arrow.setAttribute('transform', `rotate(${-135+value*270/100} 100,100)`)
text.innerHTML = Math.round(value)
}
0
UPD: сделал как в вопросе, с циферками и стрелочкой
