时间戳

首页 > 解决方案 > 通过将鼠标悬停在外部 html 元素上来缩放 svg 内的组

javascript - 通过将鼠标悬停在外部 html 元素上来缩放 svg 内的组

问题描述

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

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

列表标记如下：

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 标记：

    $('.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')
    });

在这里架起了小提琴。

任何帮助深表感谢 ：）

标签： javascriptcsssvg

解决方案

好吧，通过使用你正在使用的内联transform和类似的方法来做到这一点并不容易。scale

但是基于这个关于getComputedStyle()and的解释trasnform，你可以去掉使用 CSS 类的想法并使用元素计算样式，你可以在其中获取元素的当前transform值（getComputedStyle()然后使用正则表达式来获取 的每个值matrix）。

得到上面提到的值后，修改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>

getComputedStyle如果您将在悬停时使用许多元素，这可能不是很有表现力

推荐阅读