Javascript 将鼠标悬停在外部html元素上，在svg内缩放组

我一直在尝试在SVG中的组元素上添加一个简单的缩放效果。通过将鼠标悬停在列表项上，SVG中的组元素应该放大，但是，这样做时，它将失去在元素中的位置，因为它正在使用translate

关于如何解决这个问题或我应该如何处理这个问题的任何想法

列表标记如下所示：

li.active {
  color: red;
}

.round {
  transition: transform .3 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>

竖起了小提琴

---

非常感谢您的帮助：）

好吧，像您使用的那样使用内联

变换和
缩放来实现这一点并不容易

但是基于对
getComputedStyle（）
和
trasnform
的解释，
您可以删除使用CSS类的想法，并使用元素计算样式，从中获取元素当前的
转换
值（使用
getComputedStyle（）
然后使用正则表达式获取
矩阵的每个值
）

获取上述值后，修改scaleX和scaleY值（这些值是矩阵数组的索引0和3），然后将修改后的矩阵设置回元素，查看：


$（函数（）{
$（'.list>li'）。在（'mouseover'，function（）上{
var dataNumber=$（this.data（'number'）；
$（this.addClass（'active'）；
设roundElem=$（'#'+dataNumber）[0]；
调整变换（roundElem，1.3）
});
$（'.list>li'）。在（'mouseleave'，function（）上{
$（this.removeClass（'active'）；
var dataNumber=$（this.data（'number'）；
设roundElem=$（'#'+dataNumber）[0]；
调整变换（roundElem，1）
});
功能调整变换（元素、比例）{
让trans=getComputedStyle（elem）.transform；
numberPattern=/-？\d+\.？\d+\d+/g；
v=传输匹配（数字模式）；
让newMatrix=“矩阵（“+scale+”、“+v[1]+”、“+v[2]+”、“+scale+”、“+v[4]+”、“+v[5]+”）
elem.style.transform=newMatrix
}
});
li.active{
颜色：红色；
}
.轮{
转型：转型。3缓解；
}

第1轮
第二轮

广场
用草图创建。
1.
2.
好吧，像您现在使用的那样，使用内联
变换和
缩放来实现这一点并不容易

但是基于对
getComputedStyle（）
和
trasnform
的解释，
您可以删除使用CSS类的想法，并使用元素计算样式，从中获取元素当前的
转换
值（使用
getComputedStyle（）
然后使用正则表达式获取
矩阵的每个值
）

获取上述值后，修改scaleX和scaleY值（这些值是矩阵数组的索引0和3），然后将修改后的矩阵设置回元素，查看：


$（函数（）{
$（'.list>li'）。在（'mouseover'，function（）上{
var dataNumber=$（this.data（'number'）；
$（this.addClass（'active'）；
设roundElem=$（'#'+dataNumber）[0]；
调整变换（roundElem，1.3）
});
$（'.list>li'）。在（'mouseleave'，function（）上{
$（this.removeClass（'active'）；
var dataNumber=$（this.data（'number'）；
设roundElem=$（'#'+dataNumber）[0]；
调整变换（roundElem，1）
});
功能调整变换（元素、比例）{
让trans=getComputedStyle（elem）.transform；
numberPattern=/-？\d+\.？\d+\d+/g；
v=传输匹配（数字模式）；
让newMatrix=“矩阵（“+scale+”、“+v[1]+”、“+v[2]+”、“+scale+”、“+v[4]+”、“+v[5]+”）
elem.style.transform=newMatrix
}
});
li.active{
颜色：红色；
}
.轮{
转型：转型。3缓解；
}

第1轮
第二轮

广场
用草图创建。
1.
2.
您只需添加另一个
g
元素并保留初始代码即可。您还可以简化它，因为您不需要切换
li
类。考虑<代码>：悬停< /代码>代替


$（函数（）{
$（'.list>li'）。在（'mouseover'，function（）上{
var_this=$（this），
dataNumber=_this.data（'number'）；
$（'#'+dataNumber）.addClass（'活动'）
});
$（'.list>li'）。在（'mouseleave'，function（）上{
$（'g.active'）.removeClass（'active'））
});
});
li:悬停{
颜色：红色；
}
g{
转变：转变。3s轻松；
变换原点：中心；
变换框：填充框；
}
g、 活跃的{
转换：比例（1.3）；
}

第1轮
第二轮

广场
用草图创建。
1.
2.
您可以使用sim卡
    $('.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')
    });