1

bueno estaba trabajando en un proyecto personal y me sucedió algo que no se si en verdad lo estoy entendiendo bien, el punto es que estoy cambiando los colores de un SVG con una clase de css la cual es modificada con una función de JavaScript esto funciona, el punto es que el cambio solo lo hace a un solo atributo y y no a los demás con esa misma clase:

<svg width="100%" height="100%" viewBox="0 0 408 303" fill="none" xmlns="http://www.w3.org/2000/svg">
        <style>
        .color1 {fill:#8a6dc0}
        </style>
        
        <g id="TRESX31">
        <rect width="408" height="303" fill="white"/>
        <rect id="Rectangle1" x="10" y="16" width="40" height="40" fill="#858585"/>
        <rect id="Rectangle2" x="59" y="16" width="40" height="40" class="color1"/>
        <rect id="Rectangle3" x="108" y="16" width="40" height="40" class="color1"/>
        <rect id="Rectangle4" x="157" y="16" width="40" height="40" fill="#EAAF16"/>
        <rect id="Rectangle5" x="206" y="16" width="40" height="40" class="color1"/>
    </g>
    </svg>

y modifico el color con la siguiente función:

<script>
    var r = document.querySelector('.color1');

    function myFunction_set() {
    r.style.setProperty('fill','#51d426');
    }
</script>

<button type="button" onclick="myFunction_set()">cambiar color con js varaible</button>

y necesito que el cambio se haga para todos, espero puedan ayudarme y que la información sea precisa.cuando esta por defecto introducir la descripción de la imagen aquí

1 respuesta 1

0

Al hacer var r = document.querySelector('.color1'); seleccionas solo el primer elemento cuya clase es color1. Lo que necesitas hacer es seleccionar a todos los elementos class1 con 'querySelectorAll()' y después iterar el array de los elementos class1 y cambiar el color.

var rr = document.querySelectorAll(".color1");

function myFunction_set() {
  rr.forEach(r => r.style.setProperty("fill", "#51d426"));
}
svg{border:solid}
<svg width="100%" height="100%" viewBox="0 0 408 70" fill="none" xmlns="http://www.w3.org/2000/svg">
        <style>
        .color1 {fill:#8a6dc0}
        </style>
        
        <g id="TRESX31">
        <rect width="408" height="303" fill="white"/>
        <rect id="Rectangle1" x="10" y="16" width="40" height="40" fill="#858585"/>
        <rect id="Rectangle2" x="59" y="16" width="40" height="40" class="color1"/>
        <rect id="Rectangle3" x="108" y="16" width="40" height="40" class="color1"/>
        <rect id="Rectangle4" x="157" y="16" width="40" height="40" fill="#EAAF16"/>
        <rect id="Rectangle5" x="206" y="16" width="40" height="40" class="color1"/>
    </g>
    </svg>



<button type="button" onclick="myFunction_set()">cambiar color con js varaible</button>

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.