I need some help with implementing a scale effect on group elements within an SVG. The goal is to have the group element scale up when hovering over a list item, but I am running into issues with the positioning because of the translate property.
Does anyone have any suggestions on how to solve this problem or can provide guidance on a different approach?
Here is the markup for the list:
li.active {
color: red;
}
.round {
transition: transform .3s ease;
}
.round.active {
transform: scale(1.3);
}
<ul class="list">
<li data-number="round1">round 1</li>
<li data-number="round1-copy">round 2</li>
</ul>
And here is the jQuery code:
$('.list > li').on('mouseover', function() {
var _this = $(this),
dataNumber = _this.data('number');
_this.addClass('active');
$('#' + dataNumber).addClass('active');
});
$('.list > li').on('mouseleave', function() {
$(this).removeClass('active');
$('.round.active').removeClass('active');
});
You can view a working example on this JSFiddle link.
Any assistance would be greatly appreciated :)