javascript - 通过将鼠标悬停在外部html元素上来在svg中缩放组(Scale group inside svg by hovering over external html element)

Question

I am stuck on trying to add a simple scale effect on group elements inside an SVG.(我一直试图在SVG内的组元素上添加简单的缩放效果。)

By hovering over a list item a group element from the SVG should scale-up, however, when doing so it will lose its position in the element since it is using translate.(通过将鼠标悬停在列表项上，SVG中的组元素应按比例放大，但是，这样做时，由于使用平移，它将丢失其在元素中的位置。) Any idea on how to tackle this or how I should approach this.(关于如何解决这个问题或我应该如何解决的任何想法。) List markup is as follow:(列表标记如下：) 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> jQuery markup:(jQuery标记：) $('.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') }); A fiddle was set up here .(在这里摆了一个小提琴。) Any help is much appreciated :)(任何帮助深表感谢 ：）)   ask by battaboombattabaam translate from so

Answer 1

Well, it's not easy to do this by using an inline transform and a scale like you are using.(好吧，使用内联transform和像您使用的scale来做到这一点并不容易。)

But based on this explanation about getComputedStyle() and trasnform , you can remove the idea of using a CSS class and use the element computed style, where you get the element current transform value (using getComputedStyle() then a regex to get each value of the matrix ).(但是，基于这种解释有关getComputedStyle()和trasnform ，您可以删除使用CSS类的想法，使用元素计算的风格，你在哪里得到的元件电流transform值（使用getComputedStyle()然后一个正则表达式来获得的每个值matrix ）。) After getting the value mentioned above, modify the scaleX and scaleY values (those values are the index 0 and 3 of the matrix array), then set the modified matrix back to the element, take a look:(获得上述值后，修改scaleX和scaleY值（这些值是矩阵数组的索引0和3），然后将修改后的矩阵重新设置为元素，看一下：) $(function() { $('.list > li').on('mouseover', function() { var dataNumber = $(this).data('number'); $(this).addClass('active'); let roundElem = $('#' + dataNumber)[0]; adjustTransform(roundElem, 1.3) }); $('.list > li').on('mouseleave', function() { $(this).removeClass('active'); var dataNumber = $(this).data('number'); let roundElem = $('#' + dataNumber)[0]; adjustTransform(roundElem, 1) }); function adjustTransform(elem, scale) { let trans = getComputedStyle(elem).transform; numberPattern = /-?\d+\.?\d+|\d+/g; v = trans.match(numberPattern); let newMatrix = "matrix(" + scale + ", " + v[1] + "," + v[2] + "," + scale + "," + v[4] + "," + v[5] + ")" elem.style.transform = newMatrix } }); li.active { color: red; } .round { transition: transform .3 ease; } <ul class="list"> <li data-number="round1">round 1</li> <li data-number="round1-copy">round 2</li> </ul> <?xml version="1.0" encoding="UTF-8"?> <svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --> <title>square</title> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="0" y="0" width="300" height="300"></rect> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="square"> <g id="rectangle"> <use fill="#D8D8D8" fill-rule="evenodd" xlink:href="#path-1"></use> <rect stroke="#979797" stroke-width="1" x="0.5" y="0.5" width="299" height="299"></rect> </g> <g id="round1" class="round" transform="translate(119.000000, 119.000000)"> <g id="number"> <circle id="Oval" stroke="#979797" fill="#FFFFFF" cx="31" cy="31" r="31"></circle> <text id="1" font-family="Helvetica-Bold, Helvetica" font-size="20" font-weight="bold" fill="#272A2F"> <tspan x="25" y="38">1</tspan> </text> </g> </g> <g id="round1-copy" class="round" transform="translate(181.000000, 57.000000)"> <g id="number2"> <circle id="Oval2" stroke="#979797" fill="#FFFFFF" cx="31" cy="31" r="31"></circle> <text id="2" font-family="Helvetica-Bold, Helvetica" font-size="20" font-weight="bold" fill="#272A2F"> <tspan x="25" y="38">2</tspan> </text> </g> </g> </g> </g> </svg> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> this may not be very performatic if you'll have many elements using getComputedStyle on hover(如果您在悬停时使用getComputedStyle元素很多，这可能不会表现getComputedStyle)