Есть такой круг
Как сделать его на SVG, чтобы можно было заполнять его бордер и менять цвет на каждую оценку. Например: для оценки 2 была бы заполненность бордера лишь на 20%, и т.п
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть такой круг
Как сделать его на SVG, чтобы можно было заполнять его бордер и менять цвет на каждую оценку. Например: для оценки 2 была бы заполненность бордера лишь на 20%, и т.п
Если при оценке 2
нужно заполнить круг на 20%
, значит будет пяти бальная система и при оценке 5
круг должен быть заполнен полностью - 100%
Чтобы легче было реализовать шаги между оценками - 20%
, я выбрал радиус окружности равный r="79.61"
при котором длина окружности будете равна 2 * 79.61 * 3.14 = 500
Соответственно диапазон одной оценки будет равен 100px
Выбираю шаг step = 100
для одной оценки
let Circ_points = document.querySelector("#Circ_points");
let points = document.querySelector("#points");
let txt = document.querySelector("#txt1");
points.onchange = function(){
Circ_points.setAttribute("stroke-dashoffset", "500" - points.value);
if (points.value < 100 ) {
Circ_points.setAttribute("stroke", "black");
}
if (points.value == 100 ) {
Circ_points.setAttribute("stroke", "gold");
}
if (points.value == 200 ) {
Circ_points.setAttribute("stroke", "dodgerblue");
}
if (points.value == 300 ) {
Circ_points.setAttribute("stroke", "#5FB62F");
}
if (points.value == 400 ) {
Circ_points.setAttribute("stroke", "purple");
}
if (points.value == 500 ) {
Circ_points.setAttribute("stroke", "crimson");
}
txt.innerHTML = (points.value/100);
}
.container {
width:35vw;
height:35vh;
}
.track{
fill:none;
stroke:#CACACA;
stroke-width:15;
}
input {
position: fixed;
top: 15px;
left: 120px;
width: 80px;
background:#DCF1F6;
font-size: 0.9em;
}
svg{
display: block;
background:#F3F3F3;
}
<div class="container">
<svg viewBox="0 0 300 300" >
<circle class="track" cx="150" cy="150" r="79.61" />
<circle id="Circ_points" transform="rotate(-90 150 150)" cx="150" cy="150" r="79.61"
fill="none" stroke="black" stroke-width="15" stroke-dasharray="500"
stroke-dashoffset="500" />
<text x="50%" y="50%" id="txt1" text-anchor="middle" font-size="42px">0</text>
<text x="150" y="180" text-anchor="middle" font-size="24px" fill="#8E8E8E">
<tspan>Суммарная</tspan>
<tspan x="150" y="200">оценка</tspan> </text>
</svg>
<input type="number" id="points" step="100" value="0" min="0" max="500">
</div>
Если необходимо, чтобы в оценке были знаки после запятой, то необходимо сделать шаг более мелкий. Например 25px
let Circ_points = document.querySelector("#Circ_points");
let points = document.querySelector("#points");
let txt = document.querySelector("#txt1");
points.onchange = function(){
Circ_points.setAttribute("stroke-dashoffset", "500" - points.value);
if (points.value < 100 ) {
Circ_points.setAttribute("stroke", "black");
}
if (points.value == 100 ) {
Circ_points.setAttribute("stroke", "gold");
}
if (points.value == 200 ) {
Circ_points.setAttribute("stroke", "dodgerblue");
}
if (points.value == 300 ) {
Circ_points.setAttribute("stroke", "#5FB62F");
}
if (points.value == 400 ) {
Circ_points.setAttribute("stroke", "purple");
}
if (points.value == 500 ) {
Circ_points.setAttribute("stroke", "crimson");
}
txt.innerHTML = (points.value/100);
}
.container {
width:35vw;
height:35vh;
}
.track{
fill:none;
stroke:#CACACA;
stroke-width:15;
}
input {
position: fixed;
top: 15px;
left: 120px;
width: 80px;
background:#DCF1F6;
font-size: 0.9em;
}
svg{
display: block;
background:#F3F3F3;
}
<div class="container">
<svg viewBox="0 0 300 300" >
<circle class="track" cx="150" cy="150" r="79.61" />
<circle id="Circ_points" transform="rotate(-90 150 150)" cx="150" cy="150" r="79.61"
fill="none" stroke="black" stroke-width="15" stroke-dasharray="500"
stroke-dashoffset="500" />
<text x="50%" y="50%" id="txt1" text-anchor="middle" font-size="42px">0</text>
<text x="150" y="180" text-anchor="middle" font-size="24px" fill="#8E8E8E">
<tspan>Суммарная</tspan>
<tspan x="150" y="200">оценка</tspan> </text>
</svg>
<input type="number" id="points" step="25" value="0" min="0" max="500">
</div>
Вариант с цветной цифрой оценки
let Circ_points = document.querySelector("#Circ_points");
let points = document.querySelector("#points");
let txt = document.querySelector("#txt1");
points.onchange = function(){
Circ_points.setAttribute("stroke-dashoffset", "500" - points.value);
if (points.value < 100 ) {
Circ_points.setAttribute("stroke", "black");
txt.setAttribute("fill", "black");
}
if (points.value == 100 ) {
Circ_points.setAttribute("stroke", "#A97D4B");
txt.setAttribute("fill", "#A97D4B");
}
if (points.value == 200 ) {
Circ_points.setAttribute("stroke", "dodgerblue");
txt.setAttribute("fill", "dodgerblue");
}
if (points.value == 300 ) {
Circ_points.setAttribute("stroke", "#5FB62F");
txt.setAttribute("fill", "#5FB62F");
}
if (points.value == 400 ) {
Circ_points.setAttribute("stroke", "purple");
txt.setAttribute("fill", "purple");
}
if (points.value == 500 ) {
Circ_points.setAttribute("stroke", "crimson");
txt.setAttribute("fill", "crimson");
}
txt.innerHTML = (points.value/100);
}
.container {
width:35vw;
height:35vh;
}
.track{
fill:none;
stroke:#CACACA;
stroke-width:15;
}
input {
position: fixed;
top: 15px;
left: 120px;
width: 80px;
background:#DCF1F6;
font-size: 0.9em;
}
svg{
display: block;
background:#F3F3F3;
}
<div class="container">
<svg viewBox="0 0 300 300" >
<circle class="track" cx="150" cy="150" r="79.61" />
<circle id="Circ_points" transform="rotate(-90 150 150)" cx="150" cy="150" r="79.61"
fill="none" stroke="black" stroke-width="15" stroke-dasharray="500"
stroke-dashoffset="500" />
<text x="50%" y="50%" id="txt1" text-anchor="middle" font-size="42px">0</text>
<text x="150" y="180" text-anchor="middle" font-size="24px" fill="#8E8E8E">
<tspan>Суммарная</tspan>
<tspan x="150" y="200">оценка</tspan> </text>
</svg>
<input type="number" id="points" step="25" value="0" min="0" max="500">
</div>