Click link highlight SVG

Question

I’m learning to deal with SVG,

My doubt and the following, I have 10 balls in SVG and 10 links. My idea and click on a link and highlight a ball taking the highlight of other.

Answer 1

^{For the purpose of demonstrating how to achieve what you want, "Highlight" means the act of giving a different colour to the circle in question.}

In order to create your context, let’s use the following Markup where we have a SVG with 10 circles:

<svg id="circulos" width="720" height="120">
    <circle id="circle0" cx="20" cy="60" r="10"></circle>
    <circle id="circle1" cx="60" cy="60" r="10"></circle>
    <circle id="circle2" cx="100" cy="60" r="10"></circle>
    <circle id="circle3" cx="140" cy="60" r="10"></circle>
    <circle id="circle4" cx="180" cy="60" r="10"></circle>
    <circle id="circle5" cx="220" cy="60" r="10"></circle>
    <circle id="circle6" cx="260" cy="60" r="10"></circle>
    <circle id="circle7" cx="300" cy="60" r="10"></circle>
    <circle id="circle8" cx="340" cy="60" r="10"></circle>
    <circle id="circle9" cx="380" cy="60" r="10"></circle>
</svg>

And their 10 buttons for the color change:

<div>
    <button onclick="destacar('circle0')">0</button>
    <button onclick="destacar('circle1')">1</button>
    <button onclick="destacar('circle2')">2</button>
    <button onclick="destacar('circle3')">3</button>
    <button onclick="destacar('circle4')">4</button>
    <button onclick="destacar('circle5')">5</button>
    <button onclick="destacar('circle6')">6</button>
    <button onclick="destacar('circle7')">7</button>
    <button onclick="destacar('circle8')">8</button>
    <button onclick="destacar('circle9')">9</button>
</div>

Each button when clicked will call the Javascript function destacar(idDoCirculo) which receives as a parameter a string the same amount being equal to id of the circle we wish to highlight:

function destacar (id) {

    // Remover classe "destaque"
    var circulos = document.getElementById("circulos").getElementsByTagName('circle');
    for (var i=0; i < circulos.length; i++) {
        if (circulos[i].classList.contains('destaque')) {
            circulos[i].removeClass('destaque');
        }
    }

    // Adicionar classe "destaque" a quem diz respeito
    var svg = document.querySelector('#circulos #'+id);
    svg.addClass('destaque');
}

Within the function we go to all circles and remove the class destaque if it exists. After that we go to the specified element and add the class destaque.

This way by clicking a button we are highlighting a circle and removing the highlight of all the others, thus meeting what you want.

function destacar (id) {

    // Remover classe "destaque"
    var circulos = document.getElementById("circulos").getElementsByTagName('circle');
    for (var i=0; i < circulos.length; i++) {
        if (circulos[i].classList.contains('destaque')) {
            circulos[i].removeClass('destaque');
        }
    }

    // Adicionar classe "destaque" a quem diz respeito
    var svg = document.querySelector('#circulos #'+id);
    svg.addClass('destaque');
}


// Tem classe
SVGElement.prototype.hasClass = function (className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};

// Adicionar Classe
SVGElement.prototype.addClass = function (className) {
  if (!this.hasClass(className)) {
    this.setAttribute('class', this.getAttribute('class') + ' ' + className);
  }
};

// Remover Classe
SVGElement.prototype.removeClass = function (className) {
  var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
  if (this.hasClass(className)) {
    this.setAttribute('class', removedClass);
  }
};

// Alternar Classe
SVGElement.prototype.toggleClass = function (className) {
  if (this.hasClass(className)) {
    this.removeClass(className);
  } else {
    this.addClass(className);
  }
};

circle{
    fill:steelblue;
}
.destaque{
    fill:darkgoldenrod;
}

<svg id="circulos" width="720" height="120">
    <circle id="circle0" cx="20" cy="60" r="10"></circle>
    <circle id="circle1" cx="60" cy="60" r="10"></circle>
    <circle id="circle2" cx="100" cy="60" r="10"></circle>
    <circle id="circle3" cx="140" cy="60" r="10"></circle>
    <circle id="circle4" cx="180" cy="60" r="10"></circle>
    <circle id="circle5" cx="220" cy="60" r="10"></circle>
    <circle id="circle6" cx="260" cy="60" r="10"></circle>
    <circle id="circle7" cx="300" cy="60" r="10"></circle>
    <circle id="circle8" cx="340" cy="60" r="10"></circle>
    <circle id="circle9" cx="380" cy="60" r="10"></circle>
</svg>
<div>
    <button onclick="destacar('circle0')">0</button>
    <button onclick="destacar('circle1')">1</button>
    <button onclick="destacar('circle2')">2</button>
    <button onclick="destacar('circle3')">3</button>
    <button onclick="destacar('circle4')">4</button>
    <button onclick="destacar('circle5')">5</button>
    <button onclick="destacar('circle6')">6</button>
    <button onclick="destacar('circle7')">7</button>
    <button onclick="destacar('circle8')">8</button>
    <button onclick="destacar('circle9')">9</button>
</div>

Considerations

To make class manipulation in the elements circle within the svg more agile, we used 4 methods that are "hanging" in the prototype construction of the SVG element so that all nodes ^(nodes) have:

┌─────────────────────────────────────────────────────────┐
│ Método        │ Função                                  |
├─────────────────────────────────────────────────────────┤
│ `hasClass`    │ Verifica se tem determinada classe      |
├─────────────────────────────────────────────────────────┤
│ `addClass`    │ Adiciona determinada classe             |
├─────────────────────────────────────────────────────────┤
│ `removeClass` │ Remove determinada classe               |
├─────────────────────────────────────────────────────────┤
│ `toggleClass` │ Alternar presença de determinada classe |
└─────────────────────────────────────────────────────────┘

These methods are explained in detail in this article by Todd Motto:

Hacking SVG, traversing with Ease - addClass, removeClass, toggleClass functions

Each of these methods can be found in the code snippet that can be viewed and executed directly in the answer as well as in the Jsfiddle below.

---

Example also available on Jsfiddle.