necesito su ayuda la idea es cambiar el trazo de un círculo utilizando JavaScript es decir según una variable que cambie. Codigo:
<!DOCTYPE html>
<html lang="es">
<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>
<style type="text/css">
{
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;
}
</style>
**<script type="text/javascript">//javascript
var INdata=60;
var ct = SVGDocument.getElementsByClassName("percent");
if (INdata == 60)
{
ct.setAttribute("stroke","red");
}
</script>**
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.
[![Trazo de un círculo][1]][1] [1]: https://i.sstatic.net/voq5T.png