JimJoyce
12-08-2008, 07:07 AM
I'm a real novice.
I'm trying to animate a stickman running.
The polyline arms, legs and body are OK.
The polygon feet are OK.
But I cannot get the circle head and fists to work.
In plain svg, they just disappear.
If I embed the svg in html, they move,
but appear to be transposed at double the coordinates:
Cany anyone please give me some advice?
I dont know how to place the code in a box.
I'm copying and pasting:
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width="100" height="180"
viewBox="0 0 100 180">
<defs>
<pattern
id="gridPattern"
width="10" height="10"
patternUnits="userSpaceOnUse">
<path
d="M10,0 H0 V10"
stroke="gray" stroke-width="0.25"
fill="none" />
</pattern>
</defs>
<rect
id="grid"
width="100" height="180"
stroke="gray" stroke-width="0.25"
fill="url(#gridPattern)" />
<circle
id="head" cx="72" cy="23" r="12"
stroke="magenta" fill="magenta">
<animateMotion
begin="go.click" dur="1s" repeatCount="6" fill="freeze"
path ="M72,23 L71,24 71,22 72,19
72,15 72,14 71,14 71,17
72,23 71,24 71,22 72,19
72,15 72,14 71,14 71,17 72,23" />
</circle>
<polyline
id="back"
stroke="black" fill="none"
points= "67,34 62,42 57,90">
<animate attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="67,34 62,42 57,90;
66,37 61,44 57,92;
66,36 61,43 56,92;
66,32 61,38 56,89;
67,28 61,35 56,85;
67,27 61,32 56,82;
67,27 62,32 57,82;
66,30 61,35 56,85;
67,34 62,42 57,90;
66,37 61,44 57,92;
66,36 61,43 56,92;
66,32 61,38 56,89;
67,28 61,35 56,85;
67,27 61,32 56,82;
67,27 62,32 57,82;
66,30 61,35 56,85;
67,34 62,42 57,90" />
</polyline>
<polyline
id="front"
stroke="black" fill="none"
points= "71,35 71,42 78,54 69,76 64,90">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="71,35 71,42 78,54 71,76 64,90;
70,37 70,44 77,56 71,78 64,92;
70,37 70,43 77,55 70,78 63,92;
70,33 70,38 77,50 70,75 63,89;
71,29 70,35 77,47 70,71 63,85;
71,28 70,32 77,44 70,68 63,82;
71,28 71,32 78,44 71,68 64,82;
70,31 70,35 77,47 70,69 63,85;
71,35 71,42 78,54 71,76 64,90;
70,37 70,44 77,56 71,78 64,92;
70,37 70,43 77,55 70,78 63,92;
70,33 70,38 77,50 70,75 63,89;
71,29 70,35 77,47 70,71 63,85;
71,28 70,32 77,44 70,68 63,82;
71,28 71,32 78,44 71,68 64,82;
70,31 70,35 77,47 70,69 63,85;
71,35 71,42 78,54 71,76 64,90" />
</polyline>
<polyline
id="arm1"
stroke="blue" fill="none"
points= "66,44 54,67 67,70 77,73">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="66,44 54,67 67,70 77,73;
64,44 50,66 62,73 70,78;
64,42 45,62 56,70 64,77;
59,37 42,56 52,63 60,68;
58,33 40,50 50,59 58,66;
58,31 40,48 50,56 58,62;
59,31 41,49 52,57 60,63;
60,34 44,53 56,61 65,67;
61,43 49,64 61,71 71,76;
66,46 56,69 67,73 76,77;
69,44 61,69 72,71 81,72;
70,70 64,66 76,65 85,65;
71,36 66,62 78,60 87,59;
71,34 67,59 78,57 86,56;
72,33 65,58 77,58 85,57;
70,36 60,59 72,61 81,62;
66,44 54,67 67,70 77,73" />
</polyline>
<circle
id="fist1"
stroke="blue" fill="blue"
cx="72" cy="72" r="9" >
<animateMotion
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
path ="M72,72 L66,76 60,73 56,65
54,62 54,59 56,60 60,64
66,74 72,75 77,72 80,65
82,59 82,56 81,57 77,61 72,72" />
</circle>
<polyline
id="arm2"
stroke="green" fill="none"
points= "61,43 49,64 61,71 71,76">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="61,43 49,64 61,71 71,76;
66,46 56,69 67,73 76,77;
69,44 61,69 72,71 81,72;
70,70 64,66 76,65 85,65;
71,36 66,62 78,60 87,59;
71,34 67,59 78,57 86,56;
72,33 65,58 77,58 85,57;
70,36 60,59 72,61 81,62;
66,44 54,67 67,70 77,73;
64,44 50,66 62,73 70,78;
64,42 45,62 56,70 64,77;
59,37 42,56 52,63 60,68;
58,33 40,50 50,59 58,66;
58,31 40,48 50,56 58,62;
59,31 41,49 52,57 60,63;
60,34 44,53 56,61 65,67;
61,43 49,64 61,71 71,76" />
</polyline>
<circle
id="fist2"
stroke="green" fill="green"
cx="72" cy="72" r="9" >
<animateMotion
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
path ="M66,74 L72,75 77,72 80,65
82,59 82,56 81,57 77,61
72,72 66,76 60,73 56,65
54,62 54,59 56,60 60,64 66,74" />
</circle>
<polyline
id="leg1"
stroke="blue" fill="none"
points= "60,89 56,135 13,132">
<animate attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="60,89 56,135 13,132;
60,93 63,135 22,133;
60,92 71,132 31,137;
60,88 78,126 41,145;
60,83 80,122 54,154;
60,81 78,121 67,161;
61,81 76,122 77,165;
61,84 75,125 77,168;
60,89 75,130 64,170;
59,92 71,132 54,170;
58,91 63,132 42,169;
57,86 54,130 32,166;
57,83 48,126 24,161;
58,81 45,124 17,154;
58,81 47,124 11,147;
58,81 51,127 9,139;
60,89 56,135 13,132" />
</polyline>
<polygon
id="Foot1"
stroke="blue" fill="blue"
points= "13,132 6,125 5,140 4,147">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="13,132 6,125 5,140 4,147;
22,133 16,126 14,141 13,149;
31,137 24,132 26,147 26,154;
41,145 33,144 42,157 45,162;
54,154 45,157 60,165 66,169;
67,161 60,167 78,169 85,171;
77,165 70,172 88,171 96,170;
77,168 70,175 88,174 95,173;
64,170 58,177 76,177 84,177;
54,170 46,176 64,177 72,178;
42,169 34,174 52,177 60,178;
32,166 24,170 41,176 47,178;
24,161 17,162 30,173 35,177;
17,154 9,153 19,167 23,173;
11,147 3,143 9,158 12,165;
9,139 2,133 4,149 5,155;
13,132 6,125 5,140 4,147" />
</polygon>
<polyline
id="leg2"
stroke="green" fill="none"
points= "60,89 75,130 64,170">
<animate attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="60,89 75,130 64,170;
59,92 71,132 54,170;
58,91 63,132 42,169;
57,86 54,130 32,166;
57,83 48,126 24,161;
58,81 45,124 17,154;
58,81 47,124 11,147;
58,81 51,127 9,139;
60,89 56,135 13,132;
60,93 63,135 22,133;
60,92 71,132 31,137;
60,88 78,126 41,145;
60,83 80,122 54,154;
60,81 78,121 67,161;
61,81 76,122 77,165;
61,84 75,125 77,168;
60,89 75,130 64,170" />
</polyline>
<polygon
id="foot2"
stroke="green" fill="green"
points="64,170 58,177 76,177 84,177">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="64,170 58,177 76,177 84,177;
54,170 46,176 64,177 72,178;
42,169 34,174 52,177 60,178;
32,166 24,170 41,176 47,178;
24,161 17,162 30,173 35,177;
17,154 9,153 19,167 23,173;
11,147 3,143 9,158 12,165;
9,139 2,133 4,149 5,155;
13,132 6,125 5,140 4,147;
22,133 16,126 14,141 13,149;
31,137 24,132 26,147 26,154;
41,145 33,144 42,157 45,162;
54,154 45,157 60,165 66,169;
67,161 60,167 78,169 85,171;
77,165 70,172 88,171 96,170;
77,168 70,175 88,174 95,173;
64,170 58,177 76,177 84,177" />
</polygon>
<text x="20" y="20"
text-anchor='middle'>
GO
</text>
<rect id="go"
x="6" y="6"
width="29" height="19"
fill-opacity="0.2"/>
</svg>
I'm trying to animate a stickman running.
The polyline arms, legs and body are OK.
The polygon feet are OK.
But I cannot get the circle head and fists to work.
In plain svg, they just disappear.
If I embed the svg in html, they move,
but appear to be transposed at double the coordinates:
Cany anyone please give me some advice?
I dont know how to place the code in a box.
I'm copying and pasting:
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width="100" height="180"
viewBox="0 0 100 180">
<defs>
<pattern
id="gridPattern"
width="10" height="10"
patternUnits="userSpaceOnUse">
<path
d="M10,0 H0 V10"
stroke="gray" stroke-width="0.25"
fill="none" />
</pattern>
</defs>
<rect
id="grid"
width="100" height="180"
stroke="gray" stroke-width="0.25"
fill="url(#gridPattern)" />
<circle
id="head" cx="72" cy="23" r="12"
stroke="magenta" fill="magenta">
<animateMotion
begin="go.click" dur="1s" repeatCount="6" fill="freeze"
path ="M72,23 L71,24 71,22 72,19
72,15 72,14 71,14 71,17
72,23 71,24 71,22 72,19
72,15 72,14 71,14 71,17 72,23" />
</circle>
<polyline
id="back"
stroke="black" fill="none"
points= "67,34 62,42 57,90">
<animate attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="67,34 62,42 57,90;
66,37 61,44 57,92;
66,36 61,43 56,92;
66,32 61,38 56,89;
67,28 61,35 56,85;
67,27 61,32 56,82;
67,27 62,32 57,82;
66,30 61,35 56,85;
67,34 62,42 57,90;
66,37 61,44 57,92;
66,36 61,43 56,92;
66,32 61,38 56,89;
67,28 61,35 56,85;
67,27 61,32 56,82;
67,27 62,32 57,82;
66,30 61,35 56,85;
67,34 62,42 57,90" />
</polyline>
<polyline
id="front"
stroke="black" fill="none"
points= "71,35 71,42 78,54 69,76 64,90">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="71,35 71,42 78,54 71,76 64,90;
70,37 70,44 77,56 71,78 64,92;
70,37 70,43 77,55 70,78 63,92;
70,33 70,38 77,50 70,75 63,89;
71,29 70,35 77,47 70,71 63,85;
71,28 70,32 77,44 70,68 63,82;
71,28 71,32 78,44 71,68 64,82;
70,31 70,35 77,47 70,69 63,85;
71,35 71,42 78,54 71,76 64,90;
70,37 70,44 77,56 71,78 64,92;
70,37 70,43 77,55 70,78 63,92;
70,33 70,38 77,50 70,75 63,89;
71,29 70,35 77,47 70,71 63,85;
71,28 70,32 77,44 70,68 63,82;
71,28 71,32 78,44 71,68 64,82;
70,31 70,35 77,47 70,69 63,85;
71,35 71,42 78,54 71,76 64,90" />
</polyline>
<polyline
id="arm1"
stroke="blue" fill="none"
points= "66,44 54,67 67,70 77,73">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="66,44 54,67 67,70 77,73;
64,44 50,66 62,73 70,78;
64,42 45,62 56,70 64,77;
59,37 42,56 52,63 60,68;
58,33 40,50 50,59 58,66;
58,31 40,48 50,56 58,62;
59,31 41,49 52,57 60,63;
60,34 44,53 56,61 65,67;
61,43 49,64 61,71 71,76;
66,46 56,69 67,73 76,77;
69,44 61,69 72,71 81,72;
70,70 64,66 76,65 85,65;
71,36 66,62 78,60 87,59;
71,34 67,59 78,57 86,56;
72,33 65,58 77,58 85,57;
70,36 60,59 72,61 81,62;
66,44 54,67 67,70 77,73" />
</polyline>
<circle
id="fist1"
stroke="blue" fill="blue"
cx="72" cy="72" r="9" >
<animateMotion
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
path ="M72,72 L66,76 60,73 56,65
54,62 54,59 56,60 60,64
66,74 72,75 77,72 80,65
82,59 82,56 81,57 77,61 72,72" />
</circle>
<polyline
id="arm2"
stroke="green" fill="none"
points= "61,43 49,64 61,71 71,76">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="61,43 49,64 61,71 71,76;
66,46 56,69 67,73 76,77;
69,44 61,69 72,71 81,72;
70,70 64,66 76,65 85,65;
71,36 66,62 78,60 87,59;
71,34 67,59 78,57 86,56;
72,33 65,58 77,58 85,57;
70,36 60,59 72,61 81,62;
66,44 54,67 67,70 77,73;
64,44 50,66 62,73 70,78;
64,42 45,62 56,70 64,77;
59,37 42,56 52,63 60,68;
58,33 40,50 50,59 58,66;
58,31 40,48 50,56 58,62;
59,31 41,49 52,57 60,63;
60,34 44,53 56,61 65,67;
61,43 49,64 61,71 71,76" />
</polyline>
<circle
id="fist2"
stroke="green" fill="green"
cx="72" cy="72" r="9" >
<animateMotion
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
path ="M66,74 L72,75 77,72 80,65
82,59 82,56 81,57 77,61
72,72 66,76 60,73 56,65
54,62 54,59 56,60 60,64 66,74" />
</circle>
<polyline
id="leg1"
stroke="blue" fill="none"
points= "60,89 56,135 13,132">
<animate attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="60,89 56,135 13,132;
60,93 63,135 22,133;
60,92 71,132 31,137;
60,88 78,126 41,145;
60,83 80,122 54,154;
60,81 78,121 67,161;
61,81 76,122 77,165;
61,84 75,125 77,168;
60,89 75,130 64,170;
59,92 71,132 54,170;
58,91 63,132 42,169;
57,86 54,130 32,166;
57,83 48,126 24,161;
58,81 45,124 17,154;
58,81 47,124 11,147;
58,81 51,127 9,139;
60,89 56,135 13,132" />
</polyline>
<polygon
id="Foot1"
stroke="blue" fill="blue"
points= "13,132 6,125 5,140 4,147">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="13,132 6,125 5,140 4,147;
22,133 16,126 14,141 13,149;
31,137 24,132 26,147 26,154;
41,145 33,144 42,157 45,162;
54,154 45,157 60,165 66,169;
67,161 60,167 78,169 85,171;
77,165 70,172 88,171 96,170;
77,168 70,175 88,174 95,173;
64,170 58,177 76,177 84,177;
54,170 46,176 64,177 72,178;
42,169 34,174 52,177 60,178;
32,166 24,170 41,176 47,178;
24,161 17,162 30,173 35,177;
17,154 9,153 19,167 23,173;
11,147 3,143 9,158 12,165;
9,139 2,133 4,149 5,155;
13,132 6,125 5,140 4,147" />
</polygon>
<polyline
id="leg2"
stroke="green" fill="none"
points= "60,89 75,130 64,170">
<animate attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="60,89 75,130 64,170;
59,92 71,132 54,170;
58,91 63,132 42,169;
57,86 54,130 32,166;
57,83 48,126 24,161;
58,81 45,124 17,154;
58,81 47,124 11,147;
58,81 51,127 9,139;
60,89 56,135 13,132;
60,93 63,135 22,133;
60,92 71,132 31,137;
60,88 78,126 41,145;
60,83 80,122 54,154;
60,81 78,121 67,161;
61,81 76,122 77,165;
61,84 75,125 77,168;
60,89 75,130 64,170" />
</polyline>
<polygon
id="foot2"
stroke="green" fill="green"
points="64,170 58,177 76,177 84,177">
<animate
attributeName="points"
begin="go.click" dur="1s"
repeatCount="6" fill="freeze"
values="64,170 58,177 76,177 84,177;
54,170 46,176 64,177 72,178;
42,169 34,174 52,177 60,178;
32,166 24,170 41,176 47,178;
24,161 17,162 30,173 35,177;
17,154 9,153 19,167 23,173;
11,147 3,143 9,158 12,165;
9,139 2,133 4,149 5,155;
13,132 6,125 5,140 4,147;
22,133 16,126 14,141 13,149;
31,137 24,132 26,147 26,154;
41,145 33,144 42,157 45,162;
54,154 45,157 60,165 66,169;
67,161 60,167 78,169 85,171;
77,165 70,172 88,171 96,170;
77,168 70,175 88,174 95,173;
64,170 58,177 76,177 84,177" />
</polygon>
<text x="20" y="20"
text-anchor='middle'>
GO
</text>
<rect id="go"
x="6" y="6"
width="29" height="19"
fill-opacity="0.2"/>
</svg>