ブラウザゲーム制作をしていて、画像を全てSVGで対応するという仕様に対して、ゲームキャラクターアニメーションは通常画像の場合は、パターン分のpngを用意するか、アニメーション単位でのGIF画像を使って行うのですが、SVGフォーマットは内部に階層も持てるし、スタイルセットも行える、これを使わない手はないと考え、1ファイルで静止画からアニメーションまで対応できる方式を確立しようと考えた。
条件としては、「画像ファイルを１つにして、親要素の属性値切り替えで、方向切替や、各種アニメーションを行えるようにする」という事で、サンプルを作ってみたので、それを公開しておきます。
もう一つの条件としては、SVG画像の作成は、InkScapeを使うのが効率的なので、後から修正ができるという事も想定しておきたい。
SVG画像を修正して上書き保存したら、アニメーションデータが消えてしまうというのは、トラブルに繋がりかねない。
Inkscape作業
世の中的には、ピクセル画像操作は「Photoshop」、Draw系データ操作は「Illustrator」を使うというのがセオリーなのだが、SVGデータを作成するには、Inkscapeが最も適している。
何故なら、Inkscapeは、データ保存の標準フォーマットがsvgで行うようになっており、svg仕様に準拠している為である。
こんな便利なツールがあるのに、Illustratorを使ってsvgデータを出力しているデザイナーを見ると、もう少し幅を広げたほうがいいのに・・・と考えてしまいますが、これは僕の心の中だけで考えるようにします。
ここでは、キャラクターデータの作り方ですが、Inkscapeの使い方をレクチャーするのは行なわず、出来上がったsvgデータを元に解説します。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="64"
viewBox="0 0 16.933333 16.933333"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="test2.svg">
<style>
#chara .chara > .down .w1{visibility:hidden;}
#chara .chara > .down .w2{visibility:hidden;}
#chara .chara > .down .w3{visibility:hidden;}
#chara .chara > .up .w1{visibility:hidden;}
#chara .chara > .up .w2{visibility:hidden;}
#chara .chara > .up .w3{visibility:hidden;}
#chara .chara > .right .w1{visibility:hidden;}
#chara .chara > .right .w2{visibility:hidden;}
#chara .chara > .right .w3{visibility:hidden;}
#chara .chara > .left .w1{visibility:hidden;}
#chara .chara > .left .w2{visibility:hidden;}
#chara .chara > .left .w3{visibility:hidden;}
.chara > .down .w1{
visibility:visible;
}
</style>
<defs
id="defs2">
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-9"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-3" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-0"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-0" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-1"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-5" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-4"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-8" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-5"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-50" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-8"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-6" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-95"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-1" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="Arrow1Lstart-83"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#107f36;stroke-width:1pt;stroke-opacity:0.82745098;fill:#e8e779;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4773-7" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="6.44"
inkscape:cx="34.475174"
inkscape:cy="32.436019"
inkscape:document-units="pt"
inkscape:current-layer="svg8"
showgrid="true"
showguides="false"
units="px"
inkscape:window-width="1141"
inkscape:window-height="651"
inkscape:window-x="18"
inkscape:window-y="13"
inkscape:window-maximized="0">
<inkscape:grid
type="xygrid"
id="grid4747"
spacingx="0.52916666"
spacingy="0.52916666"
dotted="false" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer6"
inkscape:label="shadow"
style="display:inline"
sodipodi:insensitive="true">
<ellipse
style="opacity:1;fill:#1e1e1e;fill-opacity:0.59448823;fill-rule:nonzero;stroke:none;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
id="path5089"
cx="8.3154764"
cy="13.005668"
rx="4.4979167"
ry="1.8520833" />
</g>
<g
class="chara"
data-anim-type="pause-down"
inkscape:label="chara"
transform="translate(0.52916672)">
<g
inkscape:groupmode="layer"
id="layer9"
class="down"
inkscape:label="down"
style="display:inline">
<g
inkscape:groupmode="layer"
id="layer8"
inkscape:label="w3"
class="w3"
style="display:inline">
<g
id="g1758">
<g
inkscape:label="human foot"
id="layer4-3">
<ellipse
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="14.133186"
cx="0.59078503"
id="path5064-9"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-6"
cx="0.95616299"
cy="16.105448"
rx="1.6126438"
ry="0.70119208"
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-6"
inkscape:label="human hand-R">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-4"
cx="4.0435233"
cy="11.189737"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-0">
<ellipse
ry="1.5875"
rx="1.8520833"
cy="11.112499"
cx="7.6729164"
id="path4771-8"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
<circle
r="0.52916664"
cy="11.40009"
cx="6.7559133"
id="path5061-2"
style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-0">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-6"
cx="10.781359"
cy="11.10757"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-0">
<ellipse
ry="3.7041667"
rx="4.2333331"
cy="6.3068566"
cx="6.7928796"
id="path4769-7"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path4764-2"
d="m 4.2333333,4.7624998 v 1.5875001 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 7.4083332,5.8208331 v 1.5875 0"
id="path4766-9"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cscc"
inkscape:connector-curvature="0"
id="path4768-8"
d="m 4.2333333,7.9374998 c 0,0 0.2514363,0.9761646 1.3097697,0.9761646 1.0583333,0 1.3360636,-0.446998 1.3360636,-0.446998 v 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer7"
inkscape:label="w2"
class="w2"
style="display:inline">
<g
id="g1634">
<g
inkscape:label="human shadow"
id="layer6-2" />
<g
inkscape:label="human foot"
id="layer4-2">
<ellipse
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="14.115992"
cx="-1.4747466"
id="path5064-7"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-1"
cx="2.1396449"
cy="16.125828"
rx="1.6126438"
ry="0.70119208"
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-0"
inkscape:label="human hand-R">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-0"
cx="5.7690663"
cy="10.573473"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-9">
<ellipse
ry="1.5875"
rx="1.8520833"
cy="11.1125"
cx="7.6729164"
id="path4771-7"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
<circle
r="0.52916664"
cy="11.400091"
cx="6.7559133"
id="path5061-1"
style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-7">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-4"
cx="8.7271404"
cy="12.504439"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-5">
<ellipse
ry="3.7041667"
rx="4.2333331"
cy="6.3068566"
cx="6.7928796"
id="path4769-1"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path4764-7"
d="m 4.2333333,4.7624998 v 1.5875001 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 7.4083332,5.8208331 v 1.5875 0"
id="path4766-8"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cscc"
inkscape:connector-curvature="0"
id="path4768-2"
d="m 4.2333333,7.9374998 c 0,0 0.2514363,0.9761646 1.3097697,0.9761646 1.0583333,0 1.3360636,-0.446998 1.3360636,-0.446998 v 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer1"
inkscape:label="w1"
class="w1"
style="display:inline">
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="human foot"
style="display:inline">
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="path5064"
cx="0.59078503"
cy="14.133186"
rx="1.6126438"
ry="0.70119208"
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" />
<ellipse
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="16.125828"
cx="2.1396449"
id="ellipse5066"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
</g>
<g
inkscape:label="human hand-R"
id="g5077"
inkscape:groupmode="layer"
style="display:inline">
<ellipse
ry="0.94001031"
rx="1.0016369"
cy="10.249727"
cx="6.4576406"
id="ellipse5073"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="human body">
<ellipse
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776"
id="path4771"
cx="8.7312498"
cy="10.583333"
rx="1.8520833"
ry="1.5875" />
<circle
style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843"
id="path5061"
cx="7.8142467"
cy="10.870924"
r="0.52916664" />
</g>
<g
inkscape:groupmode="layer"
id="layer5"
inkscape:label="human hand-L">
<ellipse
ry="0.94001031"
rx="1.0016369"
cy="11.893104"
cx="10.68933"
id="ellipse5071"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="human head"
style="display:inline">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path4769"
cx="7.851213"
cy="5.7776899"
rx="4.2333331"
ry="3.7041667" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 5.2916666,4.2333332 v 1.5875001 0"
id="path4764"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
inkscape:connector-curvature="0"
id="path4766"
d="m 8.4666665,5.2916665 v 1.5875 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 5.2916666,7.4083332 c 0,0 0.2514363,0.9761646 1.3097697,0.9761646 1.0583333,0 1.3360636,-0.446998 1.3360636,-0.446998 v 0"
id="path4768"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscc" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer10"
class="up"
inkscape:label="up"
style="display:inline">
<g
inkscape:groupmode="layer"
id="layer13"
class="w1"
inkscape:label="w1"
style="display:inline">
<g
id="g1076"
transform="translate(-1.2892233,-0.28421801)">
<g
inkscape:label="human foot"
id="layer4-9">
<ellipse
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="14.622814"
cx="1.5388193"
id="path5064-71"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-7"
cx="3.2897296"
cy="16.582188"
rx="1.6126438"
ry="0.70119208"
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-4"
inkscape:label="human hand-R">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-5"
cx="6.6532025"
cy="10.865993"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-1">
<ellipse
ry="1.5875"
rx="1.8520833"
cy="10.706586"
cx="9.0500641"
id="path4771-78"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-2">
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 12.7,4.2333331 v 1.5875 0"
id="path4766-5"
inkscape:connector-curvature="0" />
<ellipse
ry="3.7041667"
rx="4.2333331"
cy="6.3068566"
cx="8.9095459"
id="path4769-4"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-5">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-3"
cx="10.884891"
cy="11.810935"
rx="1.0016369"
ry="0.94001031" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer14"
class="w2"
inkscape:label="w2"
style="display:inline">
<g
id="g1191"
transform="translate(-1.0583328,-0.52916666)">
<g
inkscape:label="human foot"
id="layer4-20">
<ellipse
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="14.342919"
cx="3.2955816"
id="path5064-6"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-0"
cx="3.2897296"
cy="16.582188"
rx="1.6126438"
ry="0.70119208"
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-7"
inkscape:label="human hand-R">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-2"
cx="6.0730915"
cy="9.9670668"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-98">
<ellipse
ry="1.5875"
rx="1.8520833"
cy="10.17742"
cx="9.5792303"
id="path4771-1"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-1">
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 13.229166,3.7041665 v 1.5875 0"
id="path4766-6"
inkscape:connector-curvature="0" />
<ellipse
ry="3.7041667"
rx="4.2333331"
cy="5.7776899"
cx="9.4387121"
id="path4769-11"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-8">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-1"
cx="12.810925"
cy="10.172491"
rx="1.0016369"
ry="0.94001031" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer15"
class="w3"
inkscape:label="w3"
style="display:inline">
<g
id="g1306"
transform="translate(-1.0583332,-0.52916668)">
<g
inkscape:label="human foot"
id="layer4-4">
<ellipse
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="14.622814"
cx="1.5388193"
id="path5064-3"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-77"
cx="5.1702785"
cy="16.136858"
rx="1.6126438"
ry="0.70119208"
transform="matrix(0.88659366,-0.46254912,0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-5"
inkscape:label="human hand-R">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-1"
cx="8.081295"
cy="9.2275486"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-2">
<ellipse
ry="1.5875"
rx="1.8520833"
cy="10.17742"
cx="10.108397"
id="path4771-6"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-6">
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 13.758333,3.7041665 v 1.5875 0"
id="path4766-54"
inkscape:connector-curvature="0" />
<ellipse
ry="3.7041667"
rx="4.2333331"
cy="5.7776899"
cx="9.9678793"
id="path4769-17"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-1">
<ellipse
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-34"
cx="11.24479"
cy="11.651528"
rx="1.0016369"
ry="0.94001031" />
</g>
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer11"
class="right"
inkscape:label="right"
style="display:inline">
<g
inkscape:groupmode="layer"
id="layer16"
class="w1"
inkscape:label="w1"
style="display:inline">
<g
id="g1462"
transform="translate(-1.4476081,-0.01963466)">
<g
inkscape:label="human foot"
id="layer4-0">
<ellipse
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="6.0543289"
cx="-15.051784"
id="path5064-1"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-9"
cx="-13.502924"
cy="8.0469704"
rx="1.6126438"
ry="0.70119208"
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-57"
inkscape:label="human hand-R">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-6"
cx="-11.00486"
cy="10.249727"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-8">
<ellipse
transform="scale(-1,1)"
ry="1.5875"
rx="1.8520833"
cy="10.583333"
cx="-8.7312508"
id="path4771-5"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
<circle
transform="scale(-1,1)"
r="0.52916664"
cy="10.870924"
cx="-9.6482534"
id="path5061-4"
style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-79">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-66"
cx="-6.77317"
cy="11.893104"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-66">
<ellipse
transform="scale(-1,1)"
ry="3.7041667"
rx="4.2333331"
cy="5.7776899"
cx="-9.6112871"
id="path4769-70"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path4764-4"
d="m 12.170833,4.2333331 v 1.5875001 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 8.9958337,5.2916664 v 1.5875 0"
id="path4766-1"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cscc"
inkscape:connector-curvature="0"
id="path4768-0"
d="m 12.170833,7.4083331 c 0,0 -0.251436,0.9761646 -1.309769,0.9761646 -1.0583334,0 -1.3360637,-0.446998 -1.3360637,-0.446998 v 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer17"
class="w2"
inkscape:label="w2"
style="display:inline">
<g
id="g1600"
transform="translate(-1.5874995)">
<g
inkscape:label="human foot"
id="layer4-8">
<ellipse
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="6.0371346"
cx="-17.117315"
id="path5064-4"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-5"
cx="-13.502924"
cy="8.0469713"
rx="1.6126438"
ry="0.70119208"
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-8"
inkscape:label="human hand-R">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-8"
cx="-11.693434"
cy="10.573473"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-94">
<ellipse
transform="scale(-1,1)"
ry="1.5875"
rx="1.8520833"
cy="11.1125"
cx="-9.7895832"
id="path4771-70"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
<circle
transform="scale(-1,1)"
r="0.52916664"
cy="11.400091"
cx="-10.706587"
id="path5061-40"
style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-6">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-5"
cx="-8.7353592"
cy="12.504439"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-3">
<ellipse
transform="scale(-1,1)"
ry="3.7041667"
rx="4.2333331"
cy="6.3068566"
cx="-10.669621"
id="path4769-8"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path4764-5"
d="m 13.229166,4.7624998 v 1.5875001 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.054167,5.8208331 v 1.5875 0"
id="path4766-12"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cscc"
inkscape:connector-curvature="0"
id="path4768-4"
d="m 13.229166,7.9374998 c 0,0 -0.251436,0.9761646 -1.309769,0.9761646 -1.058334,0 -1.336064,-0.446998 -1.336064,-0.446998 v 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer18"
class="w3"
inkscape:label="w3"
style="display:inline">
<g
id="g1742"
transform="translate(-1.5874994)">
<g
inkscape:label="human foot"
id="layer4-97"
transform="translate(-4.0000017e-8,-0.52916666)">
<ellipse
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="6.5235777"
cx="-15.28723"
id="path5064-5"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-3"
cx="-14.921852"
cy="8.4958391"
rx="1.6126438"
ry="0.70119208"
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-9"
inkscape:label="human hand-R"
transform="translate(-4.0000017e-8,-0.52916666)">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-9"
cx="-13.418977"
cy="11.718904"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-4"
transform="translate(-4.0000017e-8,-0.52916666)">
<ellipse
transform="scale(-1,1)"
ry="1.5875"
rx="1.8520833"
cy="11.641665"
cx="-9.7895832"
id="path4771-9"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
<circle
transform="scale(-1,1)"
r="0.52916664"
cy="11.929256"
cx="-10.706586"
id="path5061-15"
style="opacity:1;fill:#fef2ec;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#717171;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99607843" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-9"
transform="translate(-4.0000017e-8,-0.52916666)">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-8"
cx="-6.6811404"
cy="11.636736"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-30"
transform="translate(-4.0000017e-8,-0.52916666)">
<ellipse
transform="scale(-1,1)"
ry="3.7041667"
rx="4.2333331"
cy="6.8360233"
cx="-10.669621"
id="path4769-9"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path4764-0"
d="m 13.229166,5.2916665 v 1.5875001 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 10.054166,6.3499998 v 1.5875 0"
id="path4766-7"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="cscc"
inkscape:connector-curvature="0"
id="path4768-6"
d="m 13.229166,8.4666665 c 0,0 -0.251436,0.9761646 -1.30977,0.9761646 -1.058333,0 -1.336063,-0.446998 -1.336063,-0.446998 v 0"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer12"
class="left"
inkscape:label="left"
style="display:inline">
<g
inkscape:groupmode="layer"
id="layer19"
class="w1"
inkscape:label="w1"
style="display:inline">
<g
id="g1883"
transform="translate(-0.35659186)">
<g
inkscape:label="human foot"
id="layer4-975">
<ellipse
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="6.3789835"
cx="-14.423178"
id="path5064-52"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-4"
cx="-12.672267"
cy="8.338357"
rx="1.6126438"
ry="0.70119208"
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-94"
inkscape:label="human hand-R">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-47"
cx="-11.165889"
cy="10.865993"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-95">
<ellipse
transform="scale(-1,1)"
ry="1.5875"
rx="1.8520833"
cy="10.706586"
cx="-8.7690277"
id="path4771-56"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-15">
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 5.1190918,4.2333331 v 1.5875 0"
id="path4766-91"
inkscape:connector-curvature="0" />
<ellipse
transform="scale(-1,1)"
ry="3.7041667"
rx="4.2333331"
cy="6.3068566"
cx="-8.9095459"
id="path4769-3"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-88">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-9"
cx="-6.9342012"
cy="11.810935"
rx="1.0016369"
ry="0.94001031" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer20"
class="w2"
inkscape:label="w2"
style="display:inline">
<g
id="g2030"
transform="translate(-0.65486846,-0.24494861)">
<g
inkscape:label="human foot"
id="layer4-6">
<ellipse
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="6.0192485"
cx="-12.821004"
id="path5064-0"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-32"
cx="-12.826856"
cy="8.2585173"
rx="1.6126438"
ry="0.70119208"
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-2"
inkscape:label="human hand-R">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-14"
cx="-11.918574"
cy="9.9670668"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-7">
<ellipse
transform="scale(-1,1)"
ry="1.5875"
rx="1.8520833"
cy="10.17742"
cx="-8.4124355"
id="path4771-709"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-57">
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 4.7624999,3.7041665 v 1.5875 0"
id="path4766-2"
inkscape:connector-curvature="0" />
<ellipse
transform="scale(-1,1)"
ry="3.7041667"
rx="4.2333331"
cy="5.7776899"
cx="-8.5529537"
id="path4769-97"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-68">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-2"
cx="-5.1807413"
cy="10.172491"
rx="1.0016369"
ry="0.94001031" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer21"
class="w3"
inkscape:label="w3"
style="display:inline">
<g
id="g2181"
transform="translate(-0.65486856,-0.24494859)">
<g
inkscape:label="human foot"
id="layer4-65"
transform="translate(0,0.52916666)">
<ellipse
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)"
ry="0.70119208"
rx="1.6126438"
cy="5.829895"
cx="-14.342319"
id="path5064-04"
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382" />
<ellipse
style="opacity:1;fill:#999999;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17640628;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5066-51"
cx="-10.710859"
cy="7.3439388"
rx="1.6126438"
ry="0.70119208"
transform="matrix(-0.88659366,-0.46254912,-0.44485223,0.89560398,0,0)" />
</g>
<g
style="display:inline"
id="g5077-23"
inkscape:label="human hand-R"
transform="translate(0,0.52916666)">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5073-7"
cx="-9.9103708"
cy="8.6983824"
rx="1.0016369"
ry="0.94001031" />
</g>
<g
inkscape:label="human body"
id="layer3-24"
transform="translate(0,0.52916666)">
<ellipse
transform="scale(-1,1)"
ry="1.5875"
rx="1.8520833"
cy="9.6482534"
cx="-7.8832698"
id="path4771-18"
style="opacity:1;fill:#f25c09;fill-opacity:0.99606299;fill-rule:nonzero;stroke:#696969;stroke-width:0.17638889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.89763776" />
</g>
<g
style="display:inline"
inkscape:label="human head"
id="layer2-26"
transform="translate(0,0.52916666)">
<path
sodipodi:nodetypes="ccc"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 4.2333333,3.1749998 v 1.5875 0"
id="path4766-0"
inkscape:connector-curvature="0" />
<ellipse
transform="scale(-1,1)"
ry="3.7041667"
rx="4.2333331"
cy="5.2485232"
cx="-8.0237865"
id="path4769-39"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#717171;stroke-width:0.13229166;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
inkscape:label="human hand-L"
id="layer5-4"
transform="translate(0,0.52916666)">
<ellipse
transform="scale(-1,1)"
style="opacity:1;fill:#e8e779;fill-opacity:1;fill-rule:nonzero;stroke:#696969;stroke-width:0.1763889;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.92913382"
id="ellipse5071-96"
cx="-6.7468762"
cy="11.122362"
rx="1.0016369"
ry="0.94001031" />
</g>
</g>
</g>
</g>
</g>
</svg>
test.svgというデータを作りましたが、レイヤーでパターン分の画像をインポートして区分けしています。
完成したsvgデータをテキストエディタで開いて、"inkscape:label"という属性を探します。
Inkscapeのレイヤーに付けた名前は、inkscape:label="**"という属性で記述されるので、その横にcssで扱いやすいように、class属性を手作業で追加します。
Inkscapeでclass名まで設置できたら便利だったのに・・・
事前にライブラリを準備
一般的なjQueryを使って準備してもいいのですが、ライブラリ容量を増やしたくないのと、ピンポイントな機能を実現したいので、以下の２２ファイルを用意しました。
;$$MYNT_AJAX = (function(){
/**
* Ajax
* $$MYNT_AJAX | $$ajax({
* url:"", // "http://***"
* method:"POST", // POST or GET
* async:true, // true or false
* data:{}, // Object
* query:{}, // Object
* querys:[] // Array
* });
*/
var $$ajax = function(options){
if(!options){return}
var ajax = new $$ajax;
var httpoj = $$ajax.prototype.createHttpRequest();
if(!httpoj){return;}
// open メソッド;
var option = ajax.setOption(options);
// 実行
httpoj.open( option.method , option.url , option.async );
// type
httpoj.setRequestHeader('Content-Type', option.type);
// onload-check
httpoj.onreadystatechange = function(){
//readyState値は4で受信完了;
if (this.readyState==4){
//コールバック
option.onSuccess(this.responseText);
}
};
//query整形
var data = ajax.setQuery(option);
//send メソッド
if(data.length){
httpoj.send(data.join("&"));
}
else{
httpoj.send();
}
};
$$ajax.prototype.dataOption = {
url:"",
query:{}, // same-key Nothing
querys:[], // same-key OK
data:{}, // ETC-data event受渡用
async:"true", // [trye:非同期 false:同期]
method:"POST", // [POST / GET]
type:"application/x-www-form-urlencoded", // [text/javascript]...
onSuccess:function(res){},
onError:function(res){}
};
$$ajax.prototype.option = {};
$$ajax.prototype.createHttpRequest = function(){
//Win ie用
if(window.ActiveXObject){
//MSXML2以降用;
try{return new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
//旧MSXML用;
try{return new ActiveXObject("Microsoft.XMLHTTP")}
catch(e2){return null}
}
}
//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用;
else if(window.XMLHttpRequest){return new XMLHttpRequest()}
else{return null}
};
$$ajax.prototype.setOption = function(options){
var option = {};
for(var i in this.dataOption){
if(typeof options[i] != "undefined"){
option[i] = options[i];
}
else{
option[i] = this.dataOption[i];
}
}
return option;
};
$$ajax.prototype.setQuery = function(option){
var data = [];
if(typeof option.query != "undefined"){
for(var i in option.query){
data.push(i+"="+encodeURIComponent(option.query[i]));
}
}
if(typeof option.querys != "undefined"){
for(var i=0;i<option.querys.length;i++){
if(typeof option.querys[i] == "Array"){
data.push(option.querys[i][0]+"="+encodeURIComponent(option.querys[i][1]));
}
else{
var sp = option.querys[i].split("=");
data.push(sp[0]+"="+encodeURIComponent(sp[1]));
}
}
}
return data;
};
$$ajax.prototype.loadHTML = function(filePath , selector){
$$ajax({
url:filePath+"?"+(+new Date()),
method:"GET",
async:false,
data:{
selector:selector
},
async:true,
onSuccess:function(res){
var target = document.querySelector(this.data.selector);
if(!target){return;}
// resをelementに変換
var div1 = document.createElement("div");
var div2 = document.createElement("div");
div1.innerHTML = res;
// script抜き出し
var scripts = div1.getElementsByTagName("script");
while(scripts.length){
div2.appendChild(scripts[0]);
}
// script以外
target.innerHTML = "";
target.appendChild(div1);
// script
$$ajax.prototype.orderScript(div2 , target);
}
});
};
$$ajax.prototype.orderScript = function(tags , target){
if(!tags.childNodes.length){return;}
var div = document.createElement("div");
var newScript = document.createElement("script");
if(tags.childNodes[0].innerHTML){newScript.innerHTML = tags.childNodes[0].innerHTML;}
// Attributes
var attrs = tags.childNodes[0].attributes;
for(var i=0; i<attrs.length; i++){
newScript.setAttribute(attrs[i].name , attrs[i].value);
}
if(typeof tags.childNodes[0].src === "undefined"){
target.appendChild(newScript);
div.appendChild(tags.childNodes[0]);
$$ajax.prototype.orderScript(tags , target);
}
else{
newScript.onload = function(){
$$ajax.prototype.orderScript(tags , target);
};
target.appendChild(newScript);
div.appendChild(tags.childNodes[0]);
}
};
return $$ajax;
})();
;$$SVG = (function(){
// ページ内にjsライブラリの読み込み
var $$addScript = function(file){
var s = document.createElement("script");
s.src = file;
document.body.appendChild(s);
}
// イベントライブラリ
var $$event = function(target, mode, func){
//other Browser
if (typeof target.addEventListener !== "undefined"){
target.addEventListener(mode, func, false);
}
else if(typeof target.attachEvent !== "undefined"){
target.attachEvent('on' + mode, function(){func.call(target , window.event)});
}
};
// svgLoad
var $$init = function(){
switch(document.readyState){
case "complete":
new $$().autoset();
break;
case "interactive":
$$event(window , "DOMContentLoaded" , (function(e){new $$().autoset()}).bind(this));
break;
default:
$$event(window , "load" , (function(e){new $$().autoset()}).bind(this));
break;
}
};
var $$ = function(options){
};
$$.prototype.autoload = function(){
switch(document.readyState){
case "complete":
new $$().autoset();
break;
case "interactive":
$$event(window , "DOMContentLoaded" , (function(e){new $$().autoset()}).bind(this));
break;
default:
$$event(window , "load" , (function(e){new $$().autoset()}).bind(this));
break;
}
};
$$.prototype.autoset = function(){
this.changeIMG2SVG();
this.setSvgTag();
};
// ページ内のIMGタグをsvgタグに変更
$$.prototype.changeIMG2SVG = function(){
var imgTags = document.getElementsByTagName("img");
for(var i=0; i<imgTags.length; i++){
if(!imgTags[i].src){continue;}
if(!imgTags[i].getAttribute("data-svg")){continue;}
// svgファイル確認
var pathSplit = imgTags[i].src.split("?")[0].split("/");
var filename = pathSplit[pathSplit.length -1];
if(!filename){continue;}
var extensions = filename.split(".");
if(!extensions.length){continue;}
var extension = extensions[extensions.length-1];
if(!extension || extension.toLowerCase() !== "svg"){continue;}
new $$MYNT_AJAX({
url : imgTags[i].src,
method : "get",
type : "text/plane" ,
data : {
target : imgTags[i]
},
onSuccess : function(svgTag){
if(!svgTag){return;}
var div = document.createElement("div");
div.innerHTML = svgTag;
var elements = div.getElementsByTagName("svg");
if(!elements.length){return;}
var svgElement = elements[0];
var styles = svgElement.getElementsByTagName("style");
for(var i=styles.length-1; i>=0; i--){
styles[i].parentNode.removeChild(styles[i]);
}
var svg = document.createElementNS("http://www.w3.org/2000/svg" , "svg");
if(svgElement.getAttribute("viewBox")){
svg.setAttribute("viewBox" , svgElement.getAttribute("viewBox"));
}
svg.innerHTML = svgElement.innerHTML;
this.data.target.parentNode.insertBefore(svg , this.data.target);
this.data.target.parentNode.removeChild(this.data.target);
}
});
}
};
// 指定SVGタグに情報追記
$$.prototype.setSvgTag = function(options){
var svgFiles = document.getElementsByTagName("svg");
for(var i=0; i<svgFiles.length; i++){
if(!svgFiles[i].getAttribute("src")){continue;}
new $$MYNT_AJAX({
url : svgFiles[i].getAttribute("src"),
method : "get",
type : "text/plane" ,
data : {
target : svgFiles[i]
},
onSuccess : function(svgTag){
if(!svgTag){return;}
var div = document.createElement("div");
div.innerHTML = svgTag;
var elements = div.getElementsByTagName("svg");
if(!elements.length){return;}
var svgElement = elements[0];
var styles = svgElement.getElementsByTagName("style");
for(var i=styles.length-1; i>=0; i--){
styles[i].parentNode.removeChild(styles[i]);
}
var svg = this.data.target;
if(svgElement.getAttribute("viewBox")){
svg.setAttribute("viewBox" , svgElement.getAttribute("viewBox"));
}
svg.innerHTML = svgElement.innerHTML;
svg.removeAttribute("src");
}
});
}
};
// 指定SVGタグに情報追記
$$.prototype.svg = function(options){
if(options){
this.options = options;
}
var svgFiles = document.getElementsByTagName("svg");
for(var i=0; i<svgFiles.length; i++){
if(!svgFiles[i].getAttribute("src")){continue;}
new $$MYNT_AJAX({
url : svgFiles[i].getAttribute("src"),
method : "get",
type : "text/plane" ,
data : {
target : svgFiles[i]
},
onSuccess : (function(svgTag , svgData){
if(!svgData){return;}
var div = document.createElement("div");
div.innerHTML = svgData;
var elements = div.getElementsByTagName("svg");
if(!elements.length){return;}
var svgElement = elements[0];
// tag-remove
if(typeof this.options !== "undefined"){
for(var tag in this.options){
if(this.options[tag] !== true){
var tags = svgElement.getElementsByTagName(tag);
for(var i=tags.length-1; i>=0; i--){
tags[i].parentNode.removeChild(tags[i]);
}
}
}
}
var svg = svgTag;
if(svgElement.getAttribute("viewBox")){
svg.setAttribute("viewBox" , svgElement.getAttribute("viewBox"));
}
svg.innerHTML = svgElement.innerHTML;
svg.removeAttribute("src");
}).bind(this , svgFiles[i])
});
}
};
// new $$init;
return $$;
})();
以前に記事で書いた、svgを操作可能な状態でHTMLに読み込むためのライブラリです。
imgタグで読み込んだsvgファイルをcssでコントロールできる「svgControl.js」
その他のソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animation-js</title>
<link rel="stylesheet" href="anim.css">
<script src="ajax.js"></script>
<script src="svgControl.js"></script>
<style>
svg{
width:128px;
height:128px;
}
</style>
</head>
<body>
<svg id="chara" src="test.svg" data-anim-type="pause-down"></svg>
<script>
new $$SVG().svg({
style : true,
defs : false,
metadata : false,
"sodipodi:namedview" : false
});
</script>
<script src="anim.js"></script>
</body>
</html>
#chara .chara > .down .w1{visibility:hidden;}
#chara .chara > .down .w2{visibility:hidden;}
#chara .chara > .down .w3{visibility:hidden;}
#chara .chara > .up .w1{visibility:hidden;}
#chara .chara > .up .w2{visibility:hidden;}
#chara .chara > .up .w3{visibility:hidden;}
#chara .chara > .right .w1{visibility:hidden;}
#chara .chara > .right .w2{visibility:hidden;}
#chara .chara > .right .w3{visibility:hidden;}
#chara .chara > .left .w1{visibility:hidden;}
#chara .chara > .left .w2{visibility:hidden;}
#chara .chara > .left .w3{visibility:hidden;}
/* pause */
#chara[data-anim-type="pause-down"] .chara > .down .w1{
visibility:visible;
}
#chara[data-anim-type="pause-up"] .chara > .up .w1{
visibility:visible;
}
#chara[data-anim-type="pause-right"] .chara > .right .w1{
visibility:visible;
}
#chara[data-anim-type="pause-left"] .chara > .left .w1{
visibility:visible;
}
/* walk */
#chara[data-anim-type="walk-down"] .chara > .down .w1{
animation: walk-1 0.5s linear infinite;
}
#chara[data-anim-type="walk-down"] .chara > .down .w2{
animation: walk-2 0.5s linear infinite;
}
#chara[data-anim-type="walk-down"] .chara > .down .w3{
animation: walk-3 0.5s linear infinite;
}
#chara[data-anim-type="walk-up"] .chara > .up .w1{
animation: walk-1 0.5s linear infinite;
}
#chara[data-anim-type="walk-up"] .chara > .up .w2{
animation: walk-2 0.5s linear infinite;
}
#chara[data-anim-type="walk-up"] .chara > .up .w3{
animation: walk-3 0.5s linear infinite;
}
#chara[data-anim-type="walk-right"] .chara > .right .w1{
animation: walk-1 0.5s linear infinite;
}
#chara[data-anim-type="walk-right"] .chara > .right .w2{
animation: walk-2 0.5s linear infinite;
}
#chara[data-anim-type="walk-right"] .chara > .right .w3{
animation: walk-3 0.5s linear infinite;
}
#chara[data-anim-type="walk-left"] .chara > .left .w1{
animation: walk-1 0.5s linear infinite;
}
#chara[data-anim-type="walk-left"] .chara > .left .w2{
animation: walk-2 0.5s linear infinite;
}
#chara[data-anim-type="walk-left"] .chara > .left .w3{
animation: walk-3 0.5s linear infinite;
}
@keyframes walk-1{
0%{visibility:visible;}
25%{visibility:visible;}
25.1%{visibility:hidden;}
50%{visibility:hidden;}
50.1%{visibility:visible;}
75%{visibility:visible;}
75.1%{visibility:hidden;}
100%{visibility:hidden;}
}
@keyframes walk-2{
0%{visibility:hidden;}
25%{visibility:hidden;}
25.1%{visibility:visible;}
50%{visibility:visible;}
50.1%{visibility:hidden;}
100%{visibility:hidden;}
}
@keyframes walk-3{
0%{visibility:hidden;}
75%{visibility:hidden;}
75.1%{visibility:visible;}
100%{visibility:visible;}
}
(function(){
window.addEventListener("keydown", function(e){
var chara = document.getElementById("chara");
switch(e.keyCode){
case 38:// up
chara.setAttribute("data-anim-type" , "walk-up");
break;
case 40:// down
chara.setAttribute("data-anim-type" , "walk-down");
break;
case 39:// right
chara.setAttribute("data-anim-type" , "walk-right");
break;
case 37:// left
chara.setAttribute("data-anim-type" , "walk-left");
break;
}
}, false);
window.addEventListener("keyup", function(e){
var chara = document.getElementById("chara");
switch(e.keyCode){
case 38:// up
chara.setAttribute("data-anim-type" , "pause-up");
break;
case 40:// down
chara.setAttribute("data-anim-type" , "pause-down");
break;
case 39:// right
chara.setAttribute("data-anim-type" , "pause-right");
break;
case 37:// left
chara.setAttribute("data-anim-type" , "pause-left");
break;
}
}, false);
})();
解説
上記のソースコードを全てファイルに書き込んでindex.htmlをブラウザ（PC専用）で表示すると、カーソルによってキャラクターの向きが変わり、カーソルを押している間、ウォークアニメーションをします。
anim.jsでは、カーソルイベントをコントロールして、cssに、アニメーションパターンを作成しています。
今回は、jsとcssを別ファイルで設置しましたが、svgデータの中に入れ込むことも可能です。
この辺は、複数キャラクターを表示した際に共通化したいポイントと、特化した機能をもう少し定義してから最適値を決めていこうと考えています。
とりあえず、ゲーム内で、座標を動かしてあげれば、キャラクターが歩くアニメを１ファイルで実現することができました。
意外と誰もやっていないこの方式、今後のブラウザメインの世の中になることを考えるとゲーム以外でも使えそうですね。
このジャンル盛り上がってくれないかな？
0 件のコメント:
コメントを投稿