2

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.

Trazo de un círculo

1 respuesta 1

2

Hay varios errores en tu código:

  • Intentas obtener un div, en lugar de los elementos internos del svg
  • SVGDocument es una clase que se obtiene cuando accedes a elementos svg y no es tan fácil manejarlo cuando el objeto se define en línea. Te recomiendo leer este artículo (en inglés) para más información
  • getElementsByClassName() devuelve una colección HTML en lugar de solo un elemento y, además, lo usas para obtener el div padre, no propiamente el svg
  • Intentas modificar el atributo stroke, pero no se trata de un atributo, sino de una propiedad CSS, por lo que deberías usar elemento.style.stroke

Entonces, teniendo el svg en línea, puedes obtener todos los elementos <circle> y manipularlos directamente por su índice:

let INdata=60;
// Obtener todos los elementos <circle> del SVG
let ct = document.querySelectorAll('.percent > svg circle');
if(INdata == 60) {
    // Actualizar estilo del segundo <circle>
    ct[1].style.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;
}
<div class= "container"> 
<!--MUESTRA DISPONIBILIDAD-->
         <div class="card">
             <div class="box">
                 <div class="percent">
                     <svg>
                         <circle id="circle1" cx="70" cy="70" r="70"></circle> 
                         <circle id="circle2" 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.