necesito su ayuda la idea es cambiar el trazo de un círculo utilizando JavaScript es decir según una variable que cambie. Codigo:
var INdata = 60;
var ct = SVGDocument.getElementsByClassName("percent");
if (INdata == 60) {
ct.setAttribute("stroke", "red");
}
{
margin: 0;
padding: 0;
font-family: 'robot', sans-serif;
}
body {
display: flex;
justify-content: left;
align-items: left;
min-height: 100vh;
}
.container {
position: relative;
width: 700px;
display: flex;
justify-content: space-around;
}
.container .card svg {
position: relative;
width: 150px;
height: 150px;
z-index: 1000;
}
svg circle {
width: 100px;
height: 100px;
fill: none;
stroke: #191919;
stroke-width: 10;
stroke-linecap: round;
transform: translate(5px, 5px);
}
svg circle:nth-child(2) {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.card:nth-child(1) svg circle:nth-child(2) {
stroke-dashoffset: 90;
stroke: #00ff40;
}
<head>
<meta charset="utf-8">
<title>Email Report Producción Diario</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="container">
<!--MUESTRA DISPONIBILIDAD-->
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>90<span>%</span></h2>
</div>
</div>
<h2 class="text">DISPONIBILIDAD</h2>
</div>
</div>
</div>
</body>
Sólo consigo el cabio establecido del color verde, pero nada más, Lo que quiero lograr es que al hacer cambiar la variable cambie el trazo de un círculo al color rojo.
Para ello estoy explorando el manejo del Document Object Model (DOM) que se utiliza para crear, insertar, sustituir y eliminar elementos con métodos incorporados.