JavaScriptでSVGのパスを基にアニメーション処理を行いたい

###前提・実現したいこと
SVGのパスを基に、anime.jsライブラリを使って要素に対してアニメーション処理を行いたいと思っています。

Follow SVG Path - anime.js
このページを参考にコードを書いたのですが、JavaScriptの方に上手くパスを渡せていないのか、アニメーションが動きません。
HTMLに埋め込んだパスの書き方を間違えてるのかと思いましたが、コピーして埋め込んだものも、ただ四角を描くだけのシンプルなパスでもパス自体は描画されますがアニメーションが動きません。

パスの受け取り方が間違っているのでしょうか。
アドバイスお願いします。

###該当のソースコード
index.html

HTML
1<!DOCTYPE html lang="ja">
2	<head>
3	</head>
4	
5	<body>
6		<svg width="256" height="256" viewBox="0 0 256 256">
7		<path fill="none" stroke="black" stroke-width="10"
8		 d= "m100,100 h100 v 100 h -100 v -100 z"></path>
9        </svg>
10		 
11		<div class = "element">
12		 	<img src="sample.png">
13      	</div>
14      	
15      	<link rel="stylesheet" href="elements.css" />
16		<script type="text/javascript" src="anime.min.js"></script>
17		<script type="text/javascript" src="animation.js"></script>
18	</body>
19</html>

elements.css

CSS
1.element{
2	position: absolute;
3}

animation.js

JavaScript
1var path = anime.path("path");
2
3anime({
4  targets: ".element",
5  translateX: path,
6  translateY: path,
7  rotate: path,
8  duration: 3000,
9  loop: true,
10  easing: "linear"
11});

###補足情報(言語/FW/ツール等のバージョンなど)
anime.jsライブラリを使用しています。

kei344

2017/04/14 06:53

プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

行動規範の内容に同意します

回答1件

ベストアンサー

公式のサンプルでは下記のようにしているようです。

JavaScript
1anime({
2  targets: '.green',
3  translateX: path('x'),
4  translateY: path('y'),
5  rotate: path('angle'),
6  duration: 3000,
7  loop: true,
8  easing: 'linear'
9});
10```**動くサンプル：**[https://jsfiddle.net/fgdusf6x/](https://jsfiddle.net/fgdusf6x/)
11
12---
13
14【Documentation | anime.js】
15[http://anime-js.com/documentation/#motionPath](http://anime-js.com/documentation/#motionPath)