¿Cómo puedo cambiar el color de una imagen SVG en el vuelo estacionario?

Question

Duplicar posible:
Changing SVG image color with javascript

me gustaría cambiar el relleno de una imagen SVG cuando pasa sobre ella.

Ahora tengo un signo de interrogación negro exportado de Illustrator a SVG. Puedo poner mi página con la etiqueta img y se muestra bien, sin embargo, no tengo idea de cómo cambiar el color en el código.

Answer 1

archivos SVG se pueden modificar directamente desde javascript, es decir, las propiedades de la "imagen" son accesibles desde el DOM.

mirada a este post de desbordamiento de pila: modify stroke and fill of svg image with javascript

Es importante recordar que para ello, no se puede adjuntar el archivo SVG en el código HTML común * < img/> * etiqueta, utilice en su lugar el * < svg> * ... ** < /svg> como se muestra en la publicación.

EDIT: svg on w3schools

he añadido un enlace a w3schools para que pueda ver más propiedades del objeto SVG

divertirse

Answer 2

Si puede publicar su código, quizás podamos solucionarlo por usted.

trate de seguir esto: http://tutorials.jenkov.com/svg/svg-and-css.html

alternativa (no exclusivo a SVG), utilizar este tipo de código con diferentes imágenes:

<img src="image1.svg" 
onmouseover="this.src='image2.svg'" 
onmouseout="this.src='image1.svg'"> 

en vivo de demostración: http://jsfiddle.net/JNChw/

Answer 3

Si lo que necesita hacer efectos de activación en SVG que no debería use etiquetas < img>. En su lugar, consulte la svg con un < iframe>, < object> o < embed> tag. Si desea guardar una solicitud http GET, puede colocar el marcado svg en línea en el documento html.

Aquí hay un ejemplo que muestra un efecto de compaginado de relleno simple inside an svg y another one (un poco más complejo que crea un contorno al desplazarse con un filtro). De todos modos, se trata básicamente de aplicar una regla de desplazamiento: CSS para establecer el color de relleno.

Se puede ver un ejemplo con todas las formas anteriores de usar svg here.