CODEWITHSUNDEEP
csssvg
Olivera Kovacevic
Olivera Kovacevic

Reputation: 717

multiple hover points on SVG

I drew a star using SVG, and I want to have a different hover effect on multiple points, for example on each point of the star.

I made a basic hover effect using normal CSS but obviously that works when you hover over the whole element which is not what I want.

here is my html and 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>

.test:hover { background: red; }

fiddle: http://jsfiddle.net/WhhAg/

Upvotes: 2

Views: 1080

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

You would have to make the star using multiple polygons each with it's own hover state.

Here's quick example on 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;
}

Upvotes: 3

Related Questions