JavaScript xdiseñadores

Eventos SVG

Es posible modificar los atributos del SVG, mediante javascript.

onclick Cuando se hace clic en el objeto
onmousedown Cuando se pulsa el botón del ratón sobre el objeto
onmouseup Cuando se suelta el botón del ratón sobre el objeto
onmouseover Cuando el cursor del ratón se mueve sobre el objeto
onmousemove Cuando el ratón se mueve sobre el objeto
onmouseout Cuando los cursores del ratón sale del objeto
onLoad Cuando se termina de cargar

Ejemplo eventos

Atributos

Modificar atributos:

svgElement.addEventListener("mouseover", sobre);

function sobre() {
svgElement.setAttribute("width", "100");
circle.setAttribute("cx", newX);
}

Ejemplo animar

Transform

La transformación es modificar 6 valores, que corresponden a la traslación en x e y, la escala en x e y, la rotación en grados, el skew en x e y en grados,