Script JavaScript SVG

Com JavaScript, você pode escrever scripts SVG. Através da escrita de scripts, você pode modificar elementos SVG, configurar animações ou ouvir eventos de mouse em formas. Quando SVG é integrado à página HTML, você pode usar elementos SVG no JavaScript.

Pode-se escrever scripts SVG usando JavaScript. Ao escrever scripts, pode-se modificar elementos SVG, configurar suas animações ou ouvir eventos do mouse em formas.

Quando o SVG é incorporado na página HTML, pode-se usar o elemento SVG no JavaScript, como se fossem elementos HTML. O JavaScript parece o mesmo.

Este artigo mostra como manipular elementos SVG com JavaScript, mas não explica o JavaScript em si. Para entender os exemplos deste artigo, você precisa já ter um conhecimento básico do JavaScript.

Exemplo de script SVG

Este é um exemplo simples de script SVG, que altera o tamanho do retângulo SVG ao clicar no botão.

<svg width="500" height="100">
　　　　<rect id="rect1" x="10" y="10" width="50" height="80"
　　　　　　　　　　style="stroke:#000000; fill:none"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function changeDimensions() {
　　　　　　　　document.getElementById("rect1).setAttribute("width", "10);
　　　　}
</script>

Tente clicar no botão para ver o que acontece.

Obter referência para o elemento SVG pelo ID

Você pode usar a função document.getElementById() para obter a referência para a forma SVG. Este é um exemplo:

var svgElement = document.getElementById("rect1);

Este exemplo obtém a referência para o ID 'rect1da referência do elemento SVG (o ID está especificado na propriedade id do elemento SVG).

Alterar valor de propriedade

Uma vez obtida a referência do elemento SVG, pode-se usar a função setAttribute() para alterar suas propriedades. Este é um exemplo:

var svgElement = document.getElementById("rect1);svgElement.setAttribute("width", "10);

Este exemplo configura a propriedade width do elemento SVG selecionado. Você pode usar a função setAttribute() para configurar qualquer outra propriedade, incluindo a propriedade style.

Você também pode usar a função getAttribute() para obter o valor da propriedade. Este é um exemplo:

var svgElement = document.getElementById("rect1);var width = svgElement.getAttribute("width");

Alterar propriedades CSS

Através da propriedade style do elemento SVG, pode-se referenciar propriedades CSS fornecidas para alterar as propriedades CSS do elemento SVG. Abaixo está um exemplo de configuração da propriedade CSS stroke:

var svgElement = document.getElementById("rect1);
svgElement.style.stroke = "#ff0000";

Você também pode definir qualquer outra propriedade CSS dessa forma. Basta colocar o nome no svgElement.style. na linha seguinte e configurá-lo com algum valor.

Você também pode ler o valor de uma propriedade CSS através da propriedade style. Este é um exemplo:

var svgElement = document.getElementById("rect1);
var stroke = svgElement.style.stroke;

Este exemplo lê o valor da propriedade CSS stroke.

nomes de propriedades CSS que contêm hífens (por exemplo, stroke-width) precisa ser referenciado através da construção de ['']. Isso é porque nomes de propriedades com hífen são inválidos no JavaScript. Portanto, você não pode escrever

element.style.stroke-width

ao contrário, você deve escrever

element.style['stroke-width"]

Dessa forma, você também pode usar o hífen no nome para referenciar propriedades CSS.

ouvinte de evento

Você pode adicionar ouvintes de evento diretamente ao SVG de acordo com sua necessidade. Trate-o da mesma forma que os elementos HTML. Este é um exemplo de adição de ouvintes de eventos onmouseover e onmouseout:

<svg width="500" height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;"　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] =　5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] =　1;"　　　　
/>　　　　
</svg>

Este exemplo muda a cor do traço e a largura do traço quando o mouse está sobre o retângulo e redefine a cor do traço e a largura do traço quando o mouse sai do retângulo. Você pode tentar o seguinte exemplo. Tente mover o mouse sobre a forma e, em seguida, novamente sair, para ver o efeito do ouvinte de evento.

Você ainda pode usar a função addEventListener() para anexar um ouvinte de evento ao elemento SVG. Este é um exemplo:

var svgElement = document.getElementById("rect1);
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("evento acionado!");
}

Este exemplo adiciona uma função ouvinte de evento chamada MouseOver ao evento MouseOver. Isso significa que, sempre que o usuário passar o mouse sobre o elemento SVG, a função ouvinte de evento será chamada.

Animar forma SVG

Para que a forma SVG tenha efeito de animação, você precisa chamar repetidamente a função JavaScript. A função é usada para alterar a posição ou tamanho da forma. Quando a função é chamada repetidamente e com intervalos muito curtos, a posição ou tamanho da forma também são atualizados com intervalos muito curtos, o que faz a forma parecer que está animando.

Este é um exemplo de animação de script SVG. Abaixo do exemplo, mostra o código que o cria. Clique nos dois botões abaixo da imagem SVG para começar e parar a animação.

Este é o código necessário para gerar a animação acima:

<svg width="500" height="100">
　　　　<circle id="circle1" cx="20" cy="20" r="10"
　　　　　　　　　　　　style="stroke: none; fill: #ff0000;"/>
</svg>
<script>
　　　　var timerFunction = null;
　　　　function startAnimation() {
　　　　　　　　if(timerFunction == null) {
　　　　　　　　　　　　timerFunction = setInterval(animate,　20);
　　　　　　　　}
　　　　}
　　　　function stopAnimation() {
　　　　　　　　if(timerFunction != null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction = null;
　　　　　　　　}
　　　　}
　　　　function animate() {
　　　　　　　　var circle = document.getElementById("circle1);
　　　　　　　　var x = circle.getAttribute("cx");
　　　　　　　　var newX =　2　+　parseInt(x);
　　　　　　　　if(newX >　500) {
　　　　　　　　　　　　newX =　20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx", newX);
　　　　}
</script>
<br/>
<input type="button" value="Iniciar animação" onclick="startAnimation();">
<input type="button" value="Parar animação" onclick="stopAnimation();">

›2Esses dois botões HTML têm um ouvinte de evento onclick. Esses ouvintes chamam as funções startAnimation() e stopAnimation(), que são usadas para iniciar e parar a animação. A animação começa configurando um temporizador, que

0 milissegundos para chamar a função Animate(). Novamente, limpar esta função de temporizador pode parar a animação.2A animação é executada dentro da função animate(). Primeiro, a função obtém uma referência ao elemento <circle> na imagem SVG usando a função document.getElementById(). Em seguida, lê a propriedade cx do círculo e a converte em número. Em seguida,5Adicione ao valor de cx. Se o novo valor de x for maior que200，então redefina-o para