Question

研究员，

我正在研究SVG，以便在Vuejs中使用Snapsvg完成动画。我这里有一个已经在Vuejs之外工作的例子，有一个简单的HTML页面。

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>SVG Anima</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="snap.svg-min.js"></script>
<style>
    html {
        height: 100%;
        box-sizing: border-box;
    }
    body {
        position: relative;
        margin: 0;
        padding-bottom: 6rem;
        min-height: 100%;
        font-family: "Helvetica Neue", Arial, sans-serif;
    }
    #app{
        margin: 0 auto;
        padding-top: 64px;
        max-width: 640px;
        width: 94%;
    }
    svg {
        background: #cccccc;
    }
.flex{
  display: flex;
  flex-flow: row wrap;
}
.um{fill:none;stroke:#010101;stroke-width:4;stroke-miterlimit:10;}

</style>
<script>
    var paper, map, um, umbox, um_path, um_path_length, last_point;
    window.onload = function () {
        paper = map;
        map = Snap('#numeros');
        um = map.select("#um");
        umbox = um.getBBox();
        um_path = map.select('#pathUm');
        um_path_length  = Snap.path.getTotalLength(um_path);
        last_point = um_path.getPointAtLength(um_path_length);
        var tempo = 1000;
        var parada = 0.8;

        Snap.animate(0, um_path_length, function( step ) {
            moveToPoint = Snap.path.getPointAtLength( um_path, step );
            proporcao = ((100*step)/um_path_length)/100;
            x = moveToPoint.x - 415; // - (umbox.width/2);
            y = moveToPoint.y - 675;
            um.transform('translate(' + x + ',' + y + '), scale('+proporcao+','+proporcao+','+umbox.cx+', '+umbox.cy+'),'+umbox.cx+', '+umbox.cy+')');
        },tempo, mina.easeout ,function(){
        });
    }
</script>
<body>
<div id="app">
    <div class="flex">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="670" height="670" viewBox="0 0 670.00001 670.00001" version="1.1"  
 id="numeros" xml:space="preserve">
<g
      style="display:inline"
      transform="translate(0,-382.36216)">
  <circle

        class="um"
        id="um"
        cx="413.06943"
        cy="674.49329"
        r="124.15339" />
<path
        style="display:inline;fill:none;stroke:none;stroke-width:0.41528043;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
        d="m 458.00729,775.379 c -1.18278,1.49983 -0.9226,3.67696 0.58106,4.86277 2.93412,2.31388 7.18313,1.81692 9.49048,-1.10896 3.49918,-4.43714 2.73939,-10.87047 -1.69839,-14.37015 -7.34007,-5.78844 -18.00971,-4.498 -23.83029,2.88285 -9.28311,11.7715 -7.26593,28.83914 4.50555,38.12222 19.15296,15.10418 46.92386,11.82199 62.02804,-7.33093 24.40035,-30.94102 19.09804,-75.80461 -11.84363,-100.20547 -50.0933,-39.50401 -122.72553,-30.91976 -162.22953,19.17354"
        id="pathUm" />
</g>

</svg>

    </div>
</div>

</div> 
</body> 
</html>

这是有效的，但仅仅是因为我做了一些修改。我在Inkscape上制作的svg。在Snapsvg动画中使用svg的路径正在改变位置，我不知道为什么。所以我在这里进行了修改：

x = moveToPoint.x - 415;
y = moveToPoint.y - 675;

1）有谁知道为什么路径没有走正确的道路？ 2）有谁知道这个脚本可以在Vuejs上工作（最好的方法）？

非常感谢！

Snapsvg定位和动画Vuejs上的对象

0 个答案: