Question

我只是想将一个加载的SVG移动到一个圆圈中。以下是我到目前为止的想法：“将对象保留在原处，将其旋转为半径为30的圆”：

var svgObject = Snap("svg#object g");
var path = svgObject.path("M0 0 a60 60 0 0 0 30 30");
var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);
   svgObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);

我意识到上面的代码必须相对天真，但这是我从互联网上各种来源收集的内容。

以上所有代码都将对象移到右侧。我想要它做一个完整的圆圈（结束它的确切位置）。

我需要更改什么才能使上面的代码按照描述工作？

Answer 1

如果包含完整的代码和标记，它总是容易得多。您可能正在尝试转换主svg对象（因为我可以看到代码已被编辑）而不是转换g对象。你的动画之路也是不对的。由于标记没有显示，我无法测试，但这是一个有效的例子。

只需修改圆圈路径，使其仅包含您需要的部分。

＆＃13;

var svgObject = Snap("#svgobject");
var groupObject = Snap('#svgobject g');

var path = svgObject.path("M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0").attr({ fill: 'none' });


var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);  
    
    groupObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

<svg id="svgobject" height="800" width="800">
    <g>
    <rect x="50" y="50" width="50" height="50"/>
    </g>
</svg>

＆＃13;

snap.svg在圆圈中移动对象

1 个答案: