एसवीजी समूह तत्वों पर होवर प्रभाव

Question

कृपया मेरी अज्ञानता से क्षमा करें, एसवीजी मेरे लिए बहुत नया है। मैं अपने इनलाइन एसवीजी में तत्वों के समूह पर होवर प्रभाव प्राप्त करने की कोशिश कर रहा हूं। तत्वों का प्रत्येक समूह मंडलियों का बारीकी से सेट सेट है। मैं सीएसएस के साथ इस होवर प्रभाव को प्राप्त कर सकता हूं, लेकिन जाहिर है यह केवल तभी काम करेगा जब माउस को सर्कल पर रखा जाता है। मैं जो चाहता हूं वह काम करने का प्रभाव है जब माउस पूरे क्षेत्र में होता है जिसमें मंडल होते हैं, इसलिए रिक्त स्थान और मंडल संयुक्त होते हैं।

<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/

देखें जब एक समूह मंडराना flickers के रूप में आप चक्र और उन दोनों के बीच अंतरिक्ष के बीच जाना पर माउस घूम रहा है।

समूह द्वारा कवर किए गए पूरे क्षेत्र को कवर करने के लिए माउस को प्रभावशाली होने के बारे में आप कैसे जायेंगे? क्या कोई एसवीजी तत्व है जिसका उपयोग इस के लिए किया जा सकता है?

Answer 1

आपको लापता क्षेत्र को कवर करने के लिए कुछ डालना होगा।

आसान तरीका यह एक होगा:

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

updated fiddle

Answer 2

स्वीकार किए जाते हैं जवाब मेरे लिए काम नहीं किया। मुझे निम्नलिखित समाधान मिला:

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