Skip to main content
Snippet, correcion formato imagen
Origen Enlace
FranAcuna
  • 4.1k
  • 1
  • 8
  • 20
<!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>**

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>

[![Trazo de un círculo][1]][1] [1]: https://i.sstatic.net/voq5T.pngTrazo de un círculo

<!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>**

[![Trazo de un círculo][1]][1] [1]: https://i.sstatic.net/voq5T.png

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>

Trazo de un círculo

Origen Enlace

Javascript - Cambiar stroke circle según value HTMl

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