在鼠標懸停時使用文本更改顏色制作svg多邊形按鈕？

Question

http://jsfiddle.net/J7psN/

<svg viewbox='0 0 80 80'>
    <polygon id=button points='50,0 80,80 0,80'/>
    <text x=40 y=50>HELLO</text>
</svg>

我有一個帶有文本的多邊形按鈕，當你將鼠標懸停在它上面時，我希望多邊形更亮。 問題是當您將鼠標懸停在文本上時，多邊形會變回黑暗。

我更喜歡使用html / css，但只要我不需要另一個庫，我就可以使用javascript / jquery。

我希望能夠做到以下其中一項來解決它：

• 將文本元素放在多邊形元素中，但不允許這樣做。 無法在svg中嵌套元素:(
• 在文本懸停時使用CSS來定位多邊形，但是您無法定位上一個兄弟。 CSS可以針對下一個兄弟而不是之前:(
• 將文本元素放在多邊形之前然后使用CSS下一個兄弟來在文本懸停時定位多邊形，但是我不能在文本上使用z-index，因此您無法看到文本。 svg中沒有z-index支持:(

我覺得這很簡單......我遇到了一些惱人的限制。

Answer 1

您可以使用<g>嵌套svg元素：

<svg viewbox='0 0 80 80'>
  <g id=button>
    <polygon points='50,0 80,80 0,80'/>
    <text x=40 y=50>HELLO</text>
  </g>
</svg>

然后應用CSS樣式：

#button {
  cursor: pointer;
  fill: #900;
}

#button:hover {
  cursor: pointer;
  fill: #F00;
}

text {
  font-size:7px;
  fill: black;
}

請參閱： http ： //jsfiddle.net/J7psN/1/

Answer 2

您可以使用：

$( "#button" ).hover(
  function() {
    $(this).css('fill' ,'#F00');
  }, function() {
    $(this).css('fill' ,'#900');
  }
);

$('text').mouseover(function(e) {
    $(this).prev().mouseover();
});

更新小提琴