Jak mogę zmienić kolor obrazu SVG po najechaniu myszą?

Question

Powiel możliwe:
Changing SVG image color with javascript

Chciałbym zmienić wypełnienie SVG obrazu kiedy unoszą się nad nim.

W tej chwili mam czarny znak zapytania eksportowany z programu Illustrator do SVG. Mogę umieścić na mojej stronie tag img i wyświetla się dobrze, jednak nie mam pojęcia, jak zmienić kolor w kodzie.

Answer 1

SVG Pliki mogą być modyfikowane bezpośrednio z javascript, tzn. właściwości "obrazu" są dostępne z DOM.

Spójrz na tym stanowisku od przepełnienie stosu: modify stroke and fill of svg image with javascript

Ważne jest, aby pamiętać, że aby to zrobić, nie można załączyć plik SVG we wspólnym HTML * < img/> * znacznika, użyj zamiast * < svg> * ... ** /svg> jak pokazano w poście.

EDIT: svg on w3schools

dodałem link do w3schools, dzięki czemu można zobaczyć więcej właściwości obiektu svg

Have Fun

Answer 2

Jeśli umieścisz swój kod, być może uda nam się go rozwiązać za Ciebie.

Spróbuj następujący sposób: http://tutorials.jenkov.com/svg/svg-and-css.html

Alternatywnie (nie wyłączne do SVG), korzystać z tego typu kodu z różnych obrazów:

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

żywo demo: http://jsfiddle.net/JNChw/

Answer 3

Jeśli trzeba zrobić efekt unoszących się w SVG nie należy użyj tagów < img>. Zamiast tego należy odwołać się do svg z tagiem> iframe>, < object> lub < object> lub <. Jeśli chcesz zapisać żądanie HTTP GET, możesz wstawić znacznik svg w dokumencie html.

Oto przykład pokazujący prosty efekt wypełnienia zawisu inside an svg i another one (nieco bardziej złożony, który tworzy obrys na zawisie za pomocą filtra). W każdym razie chodzi przede wszystkim o zastosowanie reguły hover CSS do ustawienia koloru wypełnienia.

Przykład ze wszystkimi powyższymi sposobami używania svg można zobaczyć here.