#javascript #html #jquery #r #svg
#javascript #HTML #jquery #r #svg
Вопрос:
Я создал код, который подсчитывает и устанавливает svg circle StrokeDashArray и strokeDashoffset. Это работает совершенно нормально, но теперь я должен применить ее для нескольких svg. Вот рабочий код для одного элемента:
<div class="progress-ring-container">
<div class="span-container">
<span>Users</span>
<span>4.3</span>
</div>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="29" cy="29"/>
<circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
</div>
// Circle progress bar
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 5 * circumference;
circle.style.strokeDashoffset = offset;
}
var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);
И вот как я пытался решить проблему:
// Circle progress bar
var circles = document.querySelectorAll('circle');
var circlesArr = Array.from(circles);
circlesArr.forEach(circleArray);
function circleArray(circle) {
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
return circumference;
}
var circumferenceFunction = circleArray();
function setProgress(percent) {
const offset = circumferenceFunction - percent / 5 * circumferenceFunction;
circle.style.strokeDashoffset = offset;
}
var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);
Я подумывал об использовании чего-то вроде .each() в jQuery, но я все еще не нахожу правильного решения. У вас есть какие-либо идеи?
Комментарии:
1. Что
var circumferenceFunction = circleArray();
предполагается делать?2. Вам не нужно ничего пробовать. ваш код работает для всех svg.
Ответ №1:
Вы можете попробовать что-то вроде приведенного ниже :
var circles = document.querySelectorAll('circle');
var circlesArr = Array.from(circles);
function circleArray(circle) {
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
const input = circle.closest('.progress-ring').getAttribute("data-percentage")
setProgress(input, circle);
function setProgress(percent, circle) {
const offset = circumference - percent / 5 * circumference;
circle.style.strokeDashoffset = offset;
}
}
circlesArr.forEach(circleArray);
Ответ №2:
Ваш код работает для всех, svg
какой класс circle
. почему вы перебираете их. просто попробуйте это. вот html:
<div class="progress-ring-container">
<div class="span-container">
<span>Users</span>
<span>4.3</span>
</div>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="29" cy="29"/>
<circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="100" cy="29"/>
<circle class="circle bg" r="25" cx="100" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="180" cy="29"/>
<circle class="circle bg" r="25" cx="180" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="260" cy="29"/>
<circle class="circle bg" r="25" cx="260" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="340" cy="29"/>
<circle class="circle bg" r="25" cx="340" cy="29"/>
</svg>
</div>
и js
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 5 * circumference;
circle.style.strokeDashoffset = offset;
}
var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);
ваш код работает. я не понял. почему вам нужно делать это один за другим. css работает для всех классов
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 5 * circumference;
circle.style.strokeDashoffset = offset;
}
var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="29" cy="29"/>
<circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="100" cy="29"/>
<circle class="circle bg" r="25" cx="100" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="180" cy="29"/>
<circle class="circle bg" r="25" cx="180" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="260" cy="29"/>
<circle class="circle bg" r="25" cx="260" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
<circle class="circle" r="25" cx="340" cy="29"/>
<circle class="circle bg" r="25" cx="340" cy="29"/>
</svg>
</div>