質問編集履歴
3
コードを変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,26 +14,26 @@
|
|
|
14
14
|
```HTML
|
|
15
15
|
|
|
16
16
|
<svg id="sample01" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
17
|
-
y="0px" viewBox="0 0
|
|
18
|
-
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="
|
|
17
|
+
y="0px" viewBox="0 0 625.73 823.29" enable-background="new 0 0 625.73 823.29" xml:space="preserve">
|
|
18
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="M275.7.53C426.33,17,506.42,141.82,571,246.78c98.44,160-143.65,206-141,325.72,1.33,59.85,89.29,159.78,21.28,232.78C402.06,858.11,306.22,859.45,281,866.47-203.83,940.65,85.38,348.36,87.57,79.23,72.26,7.62,232-2.76,275.7.53Z"/>
|
|
19
19
|
</svg>
|
|
20
20
|
|
|
21
21
|
<svg id="sample02" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
22
|
-
y="0px" viewBox="0 0
|
|
23
|
-
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="
|
|
22
|
+
y="0px" viewBox="0 0 568.6 858.94" enable-background="new 0 0 568.6 858.94" xml:space="preserve">
|
|
23
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="M310.84,13.68C239.84,78.22,215.4,89,181.47,88.94c-121.1,0-208,117.35-174.07,233.62C24.27,380.41,48.25,436,64,494.19c20.22,74.94,15.44,155,49.78,226.25,41,97.09,132.37,99.24,221.46,79.41,45.08.54,92.35,8,134.79-11.21V31.72C418.08,3.67,360.36-13.51,310.84,13.68Z"/>
|
|
24
24
|
</svg>
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
```Javascript
|
|
28
28
|
var $svg01 = Snap( '#sample01 path' );
|
|
29
29
|
var path01 = [
|
|
30
|
-
'
|
|
31
|
-
'
|
|
30
|
+
'M251.06,41.43c150.64,16.47,99,178,200.85,247.34C600.37,358.93,701.57,571.82,552.37,624c-55.15,23.28-33.08,58.68-101.09,131.68C402.06,808.55,306.22,809.9,281,816.91-203.83,891.1,85.38,298.81,87.57,29.68,72.26-41.94,207.4,38.14,251.06,41.43Z', //パス1
|
|
31
|
+
'M275.7.53C426.33,17,506.42,141.82,571,246.78c98.44,160-143.65,206-141,325.72,1.33,59.85,89.29,159.78,21.28,232.78C402.06,858.11,306.22,859.45,281,866.47-203.83,940.65,85.38,348.36,87.57,79.23,72.26,7.62,232-2.76,275.7.53Z', //パス2
|
|
32
32
|
];
|
|
33
33
|
var $svg02 = Snap( '#sample02 path' );
|
|
34
34
|
var path02 = [
|
|
35
|
-
'
|
|
36
|
-
'
|
|
35
|
+
'M447.49,59.1c-71,64.54-85.13-30.11-167.41,6.2C170,113.88,250.63,313.1,106,298.92,46,293-13.15,412.35,2.56,470.55,22.79,545.49,237,625.51,271.33,696.8c41,97.09,73.39,179,162.48,159.16,45.08.53,92.35-71.73,134.79-91V8.07C516.69-20,497,31.91,447.49,59.1Z', //パス1
|
|
36
|
+
'M310.84,13.68C239.84,78.22,215.4,89,181.47,88.94c-121.1,0-208,117.35-174.07,233.62C24.27,380.41,48.25,436,64,494.19c20.22,74.94,15.44,155,49.78,226.25,41,97.09,132.37,99.24,221.46,79.41,45.08.54,92.35,8,134.79-11.21V31.72C418.08,3.67,360.36-13.51,310.84,13.68Z', //パス2
|
|
37
37
|
];
|
|
38
38
|
var indexPath = 0;
|
|
39
39
|
var DURATION = 1000;
|
2
タイトルをわかりやすく変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
svgアニメーション 同じページ内に同じ効果・図形違いで複数設置したいがひとつしか動作しない
|
body
CHANGED
|
File without changes
|
1
記述ミス
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
```Javascript
|
|
28
28
|
var $svg01 = Snap( '#sample01 path' );
|
|
29
29
|
var path01 = [
|
|
30
|
-
'A-01, //パス1
|
|
30
|
+
'A-01', //パス1
|
|
31
31
|
'A-02', //パス2
|
|
32
32
|
];
|
|
33
33
|
var $svg02 = Snap( '#sample02 path' );
|