Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ajuda com JS

por Vinicius Macedo
| 35.2k xp | 5 posts

Bom dia pessoal, estava fuçando um pouco e decidi mexer com manipulação de imagem svg com js. O que estou tentando fazer é o seguinte: tenho duas imagens em svg e quero alterar para a segunda imagem quando clicar nela, e quando mudar a imagem (segunda imagem) quero que seja possível voltar a primeira, não sei se fui muito claro, segue o código...

Desde já agradeço a todos!

<svg id="teste" onclick="javascript:mudaSvg();" style="cursor: pointer;" class="in_icons">
    <use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>
</svg>


<script>
    function mudaSvg(){

        var pegaSvg = document.querySelector("#teste")

        var trocaSvg = pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>";

        var voltaSvg = pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>"

        if(pegaSvg == trocaSvg){
            pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>";
            console.log("volta");
            return pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>";
        }
        else{
            pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>";
            console.log("troca");
            return pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>";
        }
    }
</script>
3 respostas
por Fernando Silbertal Masini
| 133.3k xp | 55 posts

a comparação não está correta:

var trocaSvg = pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>";
var voltaSvg = pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>"

adaptando o seu código:

function mudaSvg(){

    var pegaSvg = document.querySelector("#teste")

    if(pegaSvg.innerHTML == "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>"){
        pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>";
        console.log("volta");
        return pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>";
    }
    else if(pegaSvg.innerHTML == "<use xlink:href='layouts/fonts/symbol-defs.svg#img2'></use>"){
        pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>";
        console.log("troca");
        return pegaSvg.innerHTML = "<use xlink:href='layouts/fonts/symbol-defs.svg#img1'></use>";
    }
}
por Fernando Silbertal Masini
| 133.3k xp | 55 posts

Pra ficar mais claro:

"=" significa atribuir

var cor = "azul";

"==" é usado para comparação

var cor_azul = (cor == "azul");

nesse caso, "cor_azul" será do tipo bool (true ou false)

solução!
por Vinicius Macedo
| 35.2k xp | 5 posts

Só voltando aqui pois consegui fazer funcionar.

Agradeço ao Fernando Silbertal Masini pela ajuda, foi muito importante sua resposta.

Segue os códigos funcionando...

Qualquer dúvida podem me chamar.

Html:

                        <a id="editIcon1">
                            <svg style="cursor: pointer;" class="in_icons">
                                <use xlink:href="layouts/fonts/symbol-defs.svg#in_icon-coracao1"></use>
                            </svg>
                        </a>

Javascript: 

    <script>
    var svgElement1 = document.getElementById("editIcon1");
    svgElement1.onclick = function () {
        var useElement = this.getElementsByTagName("use")[0];

       if (this.className === 'in_icons') {
           this.className = "in_icons1";
           useElement.href.baseVal = "layouts/fonts/symbol-defs.svg#in_icon-coracao1";
           console.log("troca");
       } else {
           this.className = "in_icons";
           useElement.href.baseVal = "layouts/fonts/symbol-defs.svg#in_icon-coracao2";
           console.log("volta");
       }
     }
    </script>