Question

我有一个包含多个路径的复杂SVG。我正在尝试更改路径的路径数据（d）以匹配光标的位置，因此当用户将鼠标悬停在svg上时，它们会移向指针。

考虑到我对自己的方法和工具选择不确定，看起来简单的动画看起来更像是噩梦。

这是我的SVG：

<button type="button">
<img src="/my-svg-button.svg" />
</button>

我完全失败的尝试can be found here

我想真正的问题是如何找到鼠标光标的“d”端点，以便将其分配给路径。

Answer 1

cx和cy适用于圆圈和椭圆。而且您无需修改路径的d属性。

移动任何元素所需要做的就是应用转换变换。即：

<path ... transform="translate(20, 20)">

在Snap中，您可以使用Element.transform()函数应用转换。

Here's a demo我每次移动指针时都会将每条路径移向指针。

function moveFunc( ev, x, y ) {
    //console.log(ev);
    paths.forEach(function(el) {
       // Convert screen mouse coords to the equivalent point in SVG coords
       var pt = cursorPoint(x, y);
       // Get the "center" of each path by way of its bounding box
       var b = el.getBBox();
       var cx = b.x + b.width/2;
       var cy = b.y + b.height/2;
       // Get the direction vector from the path center to the pointer location
       var dx = pt.x - cx;
       var dy = pt.y - cy;
       // Get the current transform (if any) on the path
       var currentTransform = el.transform().localMatrix;
       // Add the tranlation that moves the paths a little toward the pointer
       currentTransform = currentTransform.translate(dx/20, dy/20);
       el.transform(currentTransform);
    });
}


// Convert a screen space coordinate to an SVG coordinate
function cursorPoint(x, y) {
  var svg = s.node;
  var pt = svg.createSVGPoint();
  pt.x = x;  pt.y = y;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

希望这足以让你入门。要移动<polygon>点，您需要获取点数组，然后通过添加dx，dy来更新数组中的每个点。

您可以使用el.node.points获取多边形的点。

祝你好运！

snapsvg - 将路径移动到光标指针

1 个答案: