Estou aprendendo a lidar com SVG,
Minha duvida e a seguinte, tenho 10 bolinhas em SVG e 10 links. Minha idéia e clicar em um link e destacar uma bolinha tirando o destaque das outras.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePara efeitos de demonstração de como atingir o que pretendes, entende-se por "Destacar" o ato de dar uma cor diferente ao circulo em questão.
De forma a criar o teu contexto, vamos utilizar a seguinte markup onde temos um SVG com 10 círculos:
<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>
E os respetivos 10 botões para a troca de cor:
<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>
Cada botão ao ser clicado vai chamar a função de JavaScript destacar(idDoCirculo)
que recebe como parâmetro uma string
cuja mesma equivale ao id
do circulo que pretendemos destacar:
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');
}
Dentro da função vamos a todos os círculos e retiramos a classe destaque
se a mesma existir. Após isso vamos ao elemento indicado e adicionamos-lhe a classe destaque
.
Desta forma ao clicar num botão estamos a destacar um circulo e a remover o destaque de todos os outros, indo assim ao encontro do que pretendes.
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>
Para tornar a manipulação de classes nos elementos circle
dentro do svg
mais ágil, foram utilizados 4 métodos que ficam "pendurados" no protótipo de construção do elemento SVG para que todos os nós (nodes) do mesmo disponham de:
┌─────────────────────────────────────────────────────────┐
│ 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 |
└─────────────────────────────────────────────────────────┘
Estes métodos são explicados em detalhe neste artigo da autoria de Todd Motto:
Hacking SVG, traversing with ease - addClass, removeClass, toggleClass functions
Cada um dos referidos métodos encontra-se no trecho de código que pode ser visualizado e executado diretamente na resposta bem como no JSFiddle em baixo referenciado.
Exemplo também disponivel no JSFiddle.