Làm thế nào để di chuột qua một SVG rect?

Question

Trong đoạn SVG này (thử trong FF 8, Safari 5.1.2, Chrome 16, tất cả trên Mac), khi di chuyển chuột qua thanh, không có trình duyệt nào phát hiện đúng từng sự kiện trên chuột/ra, đôi khi nó hoạt động đôi khi nó không. Nhưng nó nhất quán trên tất cả các trình duyệt vì vậy nó có thể là một cái gì đó về mã SVG. Sử dụng onmouseover và onmouseout cho kết quả tương tự - không hoạt động bình thường.

Cách thực hiện chính xác khi di chuột cho góc SVG rect là gì?

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" version="1.1" style="display:inline"> 

<style type="text/css"> 
.bar { 
    fill: none; 
} 
.bar:hover { 
    fill: red; 
} 
</style> 
    <g> 
    <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" /> 
    </g> 
</svg> 

Answer 1

gì xảy ra là các sự kiện chuột không được phát hiện bởi vì các điền là 'không', chỉ cần thêm:

.bar { 
    fill: none; 
    pointer-events: all; 
} 

Sau đó, nó hoạt động tốt.

Answer 2

Hãy thử điền mẫu không trong suốt.

---

Ngoài ra, <style> cần phải đi ra ngoài <svg>.