SVG上的多個懸停點

Question

我使用SVG繪製了一個明星，並且我希望在多個點上有不同的懸停效果，例如在明星的每個點上。

我用普通的CSS做了一個基本的懸停效果，但是當你將鼠標懸停在不是我想要的整個元素上時，它顯然起作用。

這裏是我的HTML和CSS：

<svg height="210" width="200" class="test"> 
    <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/> 
    Sorry, your browser does not support inline SVG. 
</svg> 

​​

小提琴： http://jsfiddle.net/WhhAg/

Answer 1

你必須要使用每個都有它自己的懸停狀態多個多邊形的明星。

這裏有Codepen

HTML

<div class="svg-wrap"> 
    <svg viewBox="0 0 600 400" 
     xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g> 
     <polygon class="line-1 point" points="350,75 379,161 321,161" /> 
     <polygon class="line-2 point" points="379,161 469,161 397,215" /> 
     <polygon class="line-3 point" points="397,215 423,301 350,250" /> 
     <polygon class="line-4 point" points="350,250 277,301 303,215" /> 
     <polygon class="line-5 point" points="303,215 231,161 321,161" /> 

     <polygon class="line-6 center" points="321,161 379,161 397,215 350,250 303,215" />  
    </g> 
    </svg> 
</div> 

CSS

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.svg-wrap { 
    border:1px solid grey; 
    margin: 10px auto 0; 
    width:600px; 
} 

svg { 
    width:600px; 
    height:400px; 
    fill: red; 
    stroke:blue; 
    stroke-width:1; 
} 

.line-1 { 
    fill: green; 
} 

.line-2 { 
    fill:blue; 
} 

.line-3 { 
    fill:pink; 
} 

.line-4 { 
    fill:orange; 
} 

.line-5 { 
    fill:lime; 
} 

.line-6 { 
    fill:lightblue; 
} 

.point:hover, 
.center:hover { 
    fill:red; 
}