teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問SVGパスアニメーションの実装

編集履歴

回答編集履歴

3

調整

2022/11/04 12:06

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -11,7 +11,7 @@
11
11
  let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
12
12
  if (poly.tagName=='polygon') pathdata+='z';
13
13
  path.setAttribute('d',pathdata);
14
- poly.appendChild(path,poly);
14
+ poly.parentNode.insertBefore(path,poly);
15
15
  path.id="target_path";
16
16
  });
17
17
  });
@@ -29,32 +29,9 @@
29
29
  </svg>
30
30
  ```
31
31
  ※chromeはpolygon/polylineをpathにできませんでしたのでjsでpathを引き直しています
32
-
32
+ # 追記
33
33
  線を引くアニメならこんな感じ？
34
34
  ```javascript
35
- <script>
36
- window.addEventListener('DOMContentLoaded', ()=>{
37
- document.querySelectorAll('polygon,polyline').forEach(poly=>{
38
- const svgNS = poly.ownerSVGElement.namespaceURI;
39
- const path = document.createElementNS(svgNS,'path');
40
- const points = poly.getAttribute('points').split(/\s+|,/);
41
- const x0=points.shift(), y0=points.shift();
42
- let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
43
- if (poly.tagName=='polygon') pathdata+='z';
44
- path.setAttribute('d',pathdata);
45
- poly.parentNode.appendChild(path);
46
- path.id="target_path";
47
- });
48
- });
49
- </script>
50
-
51
- <svg class="elephant" height="300" width="300" viewBox="0 0 300 300">
52
- <g transform="scale(3)">
53
- <polygon points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657 11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301 37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646 97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 " fill="yellow" stroke="none" />
54
- </g>
55
- </svg>
56
-
57
-
58
35
  <style>
59
36
  #target_path {
60
37
  fill:none;
@@ -75,4 +52,25 @@
75
52
  }
76
53
  }
77
54
  </style>
55
+ <script>
56
+ window.addEventListener('DOMContentLoaded', ()=>{
57
+ document.querySelectorAll('polygon,polyline').forEach(poly=>{
58
+ const svgNS = poly.ownerSVGElement.namespaceURI;
59
+ const path = document.createElementNS(svgNS,'path');
60
+ const points = poly.getAttribute('points').split(/\s+|,/);
61
+ const x0=points.shift(), y0=points.shift();
62
+ let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
63
+ if (poly.tagName=='polygon') pathdata+='z';
64
+ path.setAttribute('d',pathdata);
65
+ poly.parentNode.appendChild(path);
66
+ path.id="target_path";
67
+ });
68
+ });
69
+ </script>
70
+ <svg class="elephant" height="300" width="300" viewBox="0 0 300 300">
71
+ <g transform="scale(3)">
72
+ <polygon points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657 11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301 37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646 97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 " fill="yellow" stroke="none" />
73
+ </g>
74
+ </svg>
78
75
  ```
76
+ ※注意：やるアニメによってpathの位置が変わってくるので注意ください

2

tuiki

2022/11/04 11:59

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -29,3 +29,50 @@
29
29
  </svg>
30
30
  ```
31
31
  ※chromeはpolygon/polylineをpathにできませんでしたのでjsでpathを引き直しています
32
+
33
+ 線を引くアニメならこんな感じ？
34
+ ```javascript
35
+ <script>
36
+ window.addEventListener('DOMContentLoaded', ()=>{
37
+ document.querySelectorAll('polygon,polyline').forEach(poly=>{
38
+ const svgNS = poly.ownerSVGElement.namespaceURI;
39
+ const path = document.createElementNS(svgNS,'path');
40
+ const points = poly.getAttribute('points').split(/\s+|,/);
41
+ const x0=points.shift(), y0=points.shift();
42
+ let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
43
+ if (poly.tagName=='polygon') pathdata+='z';
44
+ path.setAttribute('d',pathdata);
45
+ poly.parentNode.appendChild(path);
46
+ path.id="target_path";
47
+ });
48
+ });
49
+ </script>
50
+
51
+ <svg class="elephant" height="300" width="300" viewBox="0 0 300 300">
52
+ <g transform="scale(3)">
53
+ <polygon points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657 11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301 37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646 97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 " fill="yellow" stroke="none" />
54
+ </g>
55
+ </svg>
56
+
57
+
58
+ <style>
59
+ #target_path {
60
+ fill:none;
61
+ stroke:#000000;
62
+ stroke-width:1;
63
+ stroke-miterlimit:10;
64
+ stroke-dasharray: 661;
65
+ stroke-dashoffset: 661;
66
+ animation: h-path 5s forwards;
67
+ }
68
+
69
+ @keyframes h-path {
70
+ 0% {
71
+ stroke-dashoffset: 661;
72
+ }
73
+ 100% {
74
+ stroke-dashoffset: 0;
75
+ }
76
+ }
77
+ </style>
78
+ ```

1

調整

2022/11/04 10:38

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -1,14 +1,31 @@
1
1
  どういったアニメーションを想定しているのかわかりませんが
2
2
  ポリゴンのフチをマルがぐるぐるまわるアニメサンプルです
3
- ```HTML
3
+ ```javascript
4
+ <script>
5
+ window.addEventListener('DOMContentLoaded', ()=>{
6
+ document.querySelectorAll('polygon,polyline').forEach(poly=>{
7
+ const svgNS = poly.ownerSVGElement.namespaceURI;
8
+ const path = document.createElementNS(svgNS,'path');
9
+ const points = poly.getAttribute('points').split(/\s+|,/);
10
+ const x0=points.shift(), y0=points.shift();
11
+ let pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
12
+ if (poly.tagName=='polygon') pathdata+='z';
13
+ path.setAttribute('d',pathdata);
14
+ poly.appendChild(path,poly);
15
+ path.id="target_path";
16
+ });
17
+ });
18
+ </script>
19
+
4
20
  <svg class="elephant" height="300" width="300" viewBox="0 0 300 300">
5
- <g transform="scale(3)">
6
- <polygon id="target_pl" points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657 11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301 37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646 97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 " fill="yellow" stroke="black" />
21
+ <g transform="scale(3)">
22
+ <polygon points="25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657 11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301 37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646 97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262 " fill="yellow" stroke="black" />
7
23
  <circle id="move_circle" cx="0" cy="0" r="5" fill="red">
8
24
  <animateMotion dur="3s" repeatCount="indefinite">
9
- <mpath xlink:href="#target_pl"></mpath>
25
+ <mpath xlink:href="#target_path"></mpath>
10
26
  </animateMotion>
11
27
  　　 </circle>
12
28
  </g>
13
29
  </svg>
14
30
  ```
31
+ ※chromeはpolygon/polylineをpathにできませんでしたのでjsでpathを引き直しています