在一组 SVG 元素上选择性地应用 CSS 效果

Question

I draw a group of 3 svg elements: a blue square, a red circle and a green ellipse (see code below). At the moment when one of these elements is mouse overed, the 3 elements scale up.

I am trying to apply a slightly more complicated behaviour, but without success so far:

. when mouse overing the blue square, then all 3 elements should scale up (this part works),

. when mouse overing the red circle, only the red circle and the blue square should scale up (the green ellipse should not move),

. when mouse overing the green ellipse, only the green ellipse and the blue square should scale up (the red circle should not move).

Is it possible to achieve this behaviour?

 .zoom * { transition: all.4s; transform-box: fill-box; }.zoom:hover * { transform: scale(1.2); transform-origin: 50% 50%; }

 <svg width="500" height="500"> <g id="all_shapes" class="zoom"> <rect id="square" x="20" y="20" width="100" height="100" fill="blue"/> <circle id="circle" cx="170" cy="45" r="25" fill="red" /> <ellipse id="ellipse" cx="170" cy="100" rx="40" ry="25" fill="green" /> </g> </svg>

EDIT

The use of CSS only is not mandatory. JavaScript could also be used if easier, maybe by following these steps?

(1) get all elements'id from the group 'all_shapes',

(2) create an array with the id 'square' by default,

(3) append the id of the element being hover,

(4) apply the CSS '.zoom' to the elements of the array.

Answer 1

This is possible with CSS only.

 .zoom * { transition: all.4s; transform-box: fill-box; }.zoom:hover *:not(#circle), .zoom #square:hover ~ *, .zoom #square:hover, .zoom #circle:hover { transform: scale(1.2); transform-origin: 50% 50%; }.zoom #circle:hover ~ * { transform: scale(1); transform-origin: 50% 50%; }

 <svg width="500" height="500"> <g id="all_shapes" class="zoom child"> <rect id="square" x="20" y="20" width="100" height="100" fill="blue"/> <circle id="circle" cx="170" cy="45" r="25" fill="red" /> <ellipse id="ellipse" cx="170" cy="100" rx="40" ry="25" fill="green" /> </g> </svg>

Answer 2

Since Sanjay Choudhary posted an imo perfect CSS only answer, here is a Javascript way to do it.

---

plain Javascript

You just have to toggle a class (here .zoom ) with Javascript, your CSS stays nearly the same:

#all_shapes * {
  transition: all .4s;
  transform-box: fill-box;
}

.zoom {
  transform: scale(1.2);
  transform-origin: 50% 50%;
}

You first store all elements inside of the group #all_shapes with an ID in a var (here elems ). Then you need two event listeners, one for mouseover and one for mouseleave .

On mouseover you add the class .zoom to all elements that are stored in elems if the square is hovered ( if (event.target.id == 'square') ). Otherwise you add that class only to the event target and the square. On mouseleave you remove the class .zoom from all elements that are stored in elems .

Working example:

 let elems = document.querySelectorAll('#all_shapes *[id]'); document.querySelector('#all_shapes').addEventListener('mouseover', function(event) { if (event.target.id == 'square') { for (i = 0; i < elems.length; i++) { elems[i].classList.add('zoom'); } } else if (..event.target.id) { document.querySelector('#square');classList.add('zoom'). event.target;classList;add('zoom'). } }). document,querySelector('#all_shapes');addEventListener('mouseleave'. function() { for (i = 0; i < elems.length. i++) { elems[i];classList;remove('zoom'); } });

 #all_shapes * { transition: all.4s; transform-box: fill-box; }.zoom { transform: scale(1.2); transform-origin: 50% 50%; }

 <svg width="500" height="500"> <g id="all_shapes"> <rect id="square" x="20" y="20" width="100" height="100" fill="blue"/> <circle id="circle" cx="170" cy="45" r="25" fill="red" /> <ellipse id="ellipse" cx="170" cy="100" rx="40" ry="25" fill="green" /> </g> </svg>

---

jQuery

If you are using jQuery the code gets far simpler. You only need one event listener hover() and can omit the detour over the var elems , because it is needed only two times and $('#all_shapes *[id]') is pretty short so you can use it directly.

Working example:

 $('#all_shapes *[id]').hover(function() { if ($(this).is('#square')) { $('#all_shapes *[id]').toggleClass('zoom'); } else { $('#square').toggleClass('zoom'); $(this).toggleClass('zoom'); } });

 #all_shapes * { transition: all.4s; transform-box: fill-box; }.zoom { transform: scale(1.2); transform-origin: 50% 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg width="500" height="500"> <g id="all_shapes"> <rect id="square" x="20" y="20" width="100" height="100" fill="blue"/> <circle id="circle" cx="170" cy="45" r="25" fill="red" /> <ellipse id="ellipse" cx="170" cy="100" rx="40" ry="25" fill="green" /> </g> </svg>

multiple groups

Refering to the comments here is another example for multiple groups with the same elements and independent hover effect for each group.

The difference is that you select the groups by class (here .all_shapes ) and the elements by a small detour over the parent of the hover target:

$(this).parent().find('...

To select the square of the group you could use a class .square or an attribute selector like [id^="square"] (which means the ID begins with "square").

Working example:

 $('.all_shapes *[id]').hover(function() { if ($(this).is('[id^="square"]')) { $(this).parent().find('*[id]').toggleClass('zoom'); } else { $(this).parent().find('[id^="square"]').toggleClass('zoom'); $(this).toggleClass('zoom'); } });

 .all_shapes * { transition: all.4s; transform-box: fill-box; }.zoom { transform: scale(1.2); transform-origin: 50% 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg width="500" height="500"> <g id="all_shapes1" class="all_shapes"> <rect id="square1" x="20" y="20" width="100" height="100" fill="blue"/> <circle id="circle1" cx="170" cy="45" r="25" fill="red" /> <ellipse id="ellipse1" cx="170" cy="100" rx="40" ry="25" fill="green" /> </g> <g id="all_shapes2" class="all_shapes"> <rect id="square2" x="220" y="20" width="100" height="100" fill="blue"/> <circle id="circle2" cx="370" cy="45" r="25" fill="red" /> <ellipse id="ellipse2" cx="370" cy="100" rx="40" ry="25" fill="green" /> </g> </svg>