Geek asks and answers

Make an SVG polygon button with a text color change on mouseover?

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>

I have a polygon button with text on it, and I want the polygon to become brighter when you hover over it. The problem is that when you hover over the text, the polygon returns in the dark.

I would prefer to use mostly html / css, but I'm fine using javascript / jquery if I don't need another library.

I was hoping to do one of the following:

  • Inserting a text element inside a polygon element, but this is not allowed. Cannot nest elements in svg :(
  • Using CSS to target a polygon when text freezes, but you can't target your previous brother. CSS can focus on the next brother, but not the previous one :(
  • Place the text element in front of the polygon, then use the following CSS member to target the polygon when the text freezes, but I cannot use the z-index for the text so that you cannot see the text then. No z-index support in svg :(

I thought it would be easy ... I ran into some annoying restrictions.

+3
source share
2 answers

You can insert elements svgwith <g>:

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

and then apply the css style:

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

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

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

See: http://jsfiddle.net/J7psN/1/

+6
source

:

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

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

Fiddle

0

More articles:


All Articles