Hiệu ứng di chuột trên các phần tử nhóm SVG

Question

Hãy tha thứ cho sự thiếu hiểu biết của tôi, SVG rất mới đối với tôi. Tôi đang cố gắng để có được một hiệu ứng di chuột vào một nhóm các yếu tố trong SVG nội tuyến của tôi. Mỗi nhóm phần tử là một tập hợp các vòng tròn được định vị chặt chẽ. Tôi có thể đạt được hiệu ứng di chuột này với css, nhưng rõ ràng điều này sẽ chỉ hoạt động khi chuột được định vị trên một vòng tròn. Điều tôi muốn là hiệu ứng hoạt động khi chuột trên toàn bộ khu vực chứa các vòng kết nối, vì vậy khoảng trắng và vòng kết hợp được kết hợp.

<style> 
svg { 
    height: 220px; 
    width: 400px; 
    background: grey; 
} 

.na circle, 
.as circle { 
    fill: white; 
} 

.na:hover circle { 
    fill: blue; 
} 
</style> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g class="na"> 
    <circle cx="35%" cy="2.85%" r="2.8" /> 
    <circle cx="36.75%" cy="2.85%" r="2.8" /> 
    . 
    . 
    <circle cx="38.5%" cy="8.55%" r="2.8" /> 
    <circle cx="40.25%" cy="8.55%" r="2.8" /> 
    </g>  
</svg> 

http://jsfiddle.net/c3EaX/

Xem khi di chuyển chuột lên một nhóm di chuột nhấp nháy khi bạn đi giữa vòng tròn và không gian giữa chúng.

Bạn sẽ làm thế nào để di chuột qua hiệu ứng xuất hiện để bao phủ toàn bộ khu vực được nhóm bao phủ? Có một yếu tố SVG có thể được sử dụng cho điều này?

Answer 1

Bạn cần đặt thứ gì đó để che khu vực còn thiếu.

Cách dễ dàng hơn sẽ là một điều này:

.na circle, 
.as circle { 
    fill: white; 
    stroke: transparent; 
    stroke-width: 4px; 
} 

updated fiddle

Answer 2

Câu trả lời được chấp nhận không làm việc cho tôi. Tôi đã tìm thấy giải pháp sau:

g { 
    pointer-events: bounding-box; 
    opacity: 0.4; 
} 
g:hover { 
    opacity: 1; 
}