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
) 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…