Làm cách nào để thay đổi màu của hình ảnh SVG khi di chuột?

Question

thể trùng lặp:
Changing SVG image color with javascript

Tôi muốn thay đổi điền của một hình ảnh SVG khi tôi di chuột qua nó.

Hiện tại tôi có một dấu chấm hỏi màu đen được xuất từ ​​Illustrator sang SVG. Tôi có thể đặt trên trang của tôi với thẻ img và nó hiển thị tốt, tuy nhiên tôi không có ý tưởng làm thế nào để thay đổi màu sắc trong mã.

Answer 1

SVG tập tin có thể được sửa đổi trực tiếp từ javascript, tức là các thuộc tính của "hình ảnh" có thể truy cập từ bên trong DOM.

Nhìn vào bài đăng này từ stack overflow: modify stroke and fill of svg image with javascript

Điều quan trọng là phải nhớ rằng làm như vậy, bạn không thể gửi kèm file svg trong HTML thông thường * < img/> * thẻ, sử dụng thay vào đó * < svg> * ... ** < /svg> như được hiển thị trong bài đăng.

EDIT: svg on w3schools

tôi đã thêm một liên kết đến w3schools để bạn có thể xem chi tiết các thuộc tính của đối tượng svg

Have Fun

Answer 2

Nếu bạn có thể đăng mã của mình, có thể chúng tôi có thể khắc phục sự cố cho bạn.

Cố gắng sau này: http://tutorials.jenkov.com/svg/svg-and-css.html

Ngoài (không độc quyền để SVG), sử dụng loại mã với những hình ảnh khác nhau:

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

Live Demo: http://jsfiddle.net/JNChw/

Answer 3

Nếu bạn cần làm hiệu ứng hover trong svg bạn không nên sử dụng thẻ < img>. Thay vào đó hãy tham khảo svg bằng một khung nội tuyến <>, < đối tượng> hoặc < nhúng>. Nếu bạn muốn lưu một yêu cầu GET http, bạn có thể đặt nội tuyến đánh dấu svg trong tài liệu html.

Dưới đây là ví dụ cho thấy hiệu ứng di chuột điền đơn giản inside an svg và another one (phức tạp hơn một chút để tạo đường viền khi di chuột bằng bộ lọc). Dù sao, về cơ bản nó về việc áp dụng một quy tắc CSS: hover để thiết lập màu tô.

Ví dụ về tất cả các cách sử dụng svg ở trên có thể được xem here.