SVG Destacar um "circle"

by Salustiano Silva

HTML

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

CSS

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

JavaScript

// 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);
  }
};

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');
}