Create a hover effect over many svg shapes

HTML & CSS
1

I have a SVG with many shapes and was wondering if its possible to create a hover effect for several of them (like 3 s and 5 s )?
http://lukesspot.com/indus_links/SVG/system_169.html

Can I create a to encompass those shapes (not to hard) then make it transparent, then would I put everything in a div and create a hover effect on that.


  <div class="pathr">
   <path d="......" fill="transparent" stroke="none"/>
   <rect/>
   </rect/>
   <rect/>
   <line/>
   <line/>
  </div>

But then, how can I target the s (stroke:blue) and s (fill:blue)

2

This is easy enough by adding the following CSS rules to your styles.

circle, polygon, rect {  /* existing */
	fill: white;
	stroke-width: 2;
	stroke: black;
}
polygon {                /* existing */
	fill: lightgray;
	stroke-width: 2;
	stroke: black;
	pointer-events: all;
}
polygon:hover {   /* modified */
	fill: silver;
	stroke: blue;
}
rect:hover {      /* new */
	fill: pink;
	stroke: cyan;
	cursor:pointer;
}

Notice that I have not applied these styles the anchor, but to the main tag, polygon or rect as required. You may want to also add a link, and you might like to have different styles for different rect elements by identifying them with a class name.

3

ok,I think I didn’t explain to well, I was thinking of dding a hover effect for a group of shapes, would something like this work

<div class="system">
    <rect />
    <polygon />
</div>

Then use CSS to create a :hover for the class?

4

I don’t think you can use a div like that within an svg. For grouping elements you would use the <g> element.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

svg { height:80vh; width:80vw }

.system {
  fill: white;
  stroke: green;
  stroke-width: 5;
}
.system:hover {
  stroke:blue;
  fill:lime;
}

</style>

</head>
<body>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g class="system">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

</body>
</html>
3 Likes
5

You can apply the same style to both rect and polygon like this:

polygon:hover, rect:hover {  
    fill: pink;
	stroke: cyan;
	cursor:pointer;
}

If you want each element to have a different style you can do it like this:

polygon:hover {
	fill: silver;
	stroke: blue;
    cursor:pointer;
}
rect:hover {
	fill: pink;
	stroke: cyan;
	cursor:pointer;
}
7

Two options I see, group them like @Ray.H says. Or if the structure does not allow, you could apply a common class to each object that you want to be affected.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.