practice

　　　　

<html>

<meta charset="utf-8">
<style>
*{margin:20px;}
.ビルディング{position:fixed;
z-index:10;}
.フォント{font-family:sans-serif;}
</style>

<div class="ビルディング"><svg width="800"height="800"viewBox="-50 -50 802 802"><g><rect id="スタート_ボタン"x="100"y="-50"width="100"height="40"fill="#456789"cursor="pointer"/>
<text class="フォント"x="110"y="-22"pointer-events="none"fill="white">スタート</text>
<rect id="ストップ_ボタン"x="300"y="-50"width="100"height="40"fill="#007f6f"cursor="pointer"/>
<text class="フォント"x="310"y="-22"pointer-events="none"fill="white">ストップ</text>
<rect x="0"y="20"width="100"height="180"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="20"y="220"width="40"height="40"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="80"y="220"width="500"height="40"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="50"y="230"width="40"height="20"stroke="none"fill="#e0ffff"/>
<line x1="60"y1="230"x2="80"y2="230"stroke="lightseagreen"stroke-width="2"/>
<line x1="60"y1="250"x2="80"y2="250"stroke="lightseagreen"stroke-width="2"/>
<rect x="0"y="280"width="260"height="60"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="0"y="360"width="20"height="100"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="20"y="420"width="60"height="140"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="10"y="421"width="40"height="38"stroke="none"fill="#e0ffff"/>
<rect x="120"y="20"width="140"height="180"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="40"y="360"width="540"height="40"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="140"y="420"width="200"height="140"stroke="lightseagreen"stroke-width="2"fill="#e0ffff"/>
<rect x="100"y="580"width="20"height="20"stroke="red"stroke-width="2"fill="orange"/>

<path id="ストリート_パス"d="M114 20, L114 214, 14 214, 14 266, 280 266, 280 354, 34 354, 34 414, 114 414, 114 576"stroke="#ff00ff"stroke-width="1"fill="transparent"stroke-dasharray="4"/>
<path id="カー＿ボディ"transform="scale(0.5 0.5)translate(0,-30)"fill="#007f8f"d="M54.7,17.2c-1.3-2.5-1-4.5-1-5.7c-0.1-1.2-0.2-1.7-0.2-1.7l-0.5-0.7c-0.2-2.3-3.1-6.9-3.1-6.9l1.7-0.6C34.4-1.7,23.4,2,23.4,2c-3.3,1.8-11.5,10-11.5,10c-3.6,0-5,1.1-5,1.1C2.8,13.3,1.6,18,1.6,18c0.7,2.8-0.5,3.3-0.5,3.3l-0.7,7.4l0.9,0.4c0.5,0.1,0.9-0.9,0.9-0.9l0.8,0c0.5,1,1.9,4.2,6.7,4.2c4.8,0,5.8-5,5.8-5l0.8,0.1l0.3,1.1l24-0.2l0.2-1.7l0.9,0.1c0,0,0.4,5.6,6.7,5.7c6.3,0.1,6.3-6.2,6.3-6.2l0.9,0.3c0,0,0,0,0,0.6c0,0.6,0.4,0,0.4,0C57,19.6,54.7,17.2,54.7,17.2zM9.3,30.3c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6S11.2,30.3,9.3,30.3zM13,11.8l-0.4-0.3c6.7-6.8,10.9-9.5,10.9-9.5c1.3-0.2,1.7,0.3,1.7,0.3L13,11.8zM17.7,12.2c-1.4-1.4,0.4-3.4,0.4-3.4s6.2-4.4,8.3-5.3c2.1-0.9,8.6-1.1,11.7-1.1c3.1,0,3.7,2,3.7,2l0.7,5.1L17.7,12.2zM48.2,30c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6c2,0,3.6,1.6,3.6,3.6C51.8,28.4,50.2,30,48.2,30zM52.7,9.2c-0.4,0.3-0.9,0.1-0.9,0.1c-0.8-0.8-2.9-6.5-2.9-6.5c0.4-0.7,0.8-0.4,0.8-0.4C51.1,4.3,53.1,9,52.7,9.2z"/>
<animateMotion xlink:href="#カー＿ボディ"dur="10s"begin="click;スタート_ボタン.click"end="ストップ_ボタン.click"fill="freeze"rotate="auto-reverse"repeatCount="indefinite"calcMode="linear"keyPoints="0;0.5;0;0.5;1"keyTimes="0;0.5;0.5;0.5;1">
<mpath xlink:href="#ストリート_パス"/></animateMotion>
<circle cx="110"cy="10"r="5"stroke="none"stroke-width="2"fill="blue"/>
<text x="122"y="24"dy="14 14 14 14"fill="blue">出発地点</text>
<text x="126"y="586"fill="blue">目的地</text>
</g></svg></div>

<style>.ポジション{position:fixed;z-index:-10;}.メッシュ{fill:none;stroke:gray;stroke-width:0.4;}</style><div class="ポジション"><svg width="800"height="800"viewBox="0 0 800 800"><g><line class="メッシュ"x1="0"y1="0"x2="0"y2="600"/><line class="メッシュ"x1="20"y1="0"x2="20"y2="600"/><line class="メッシュ"x1="40"y1="0"x2="40"y2="600"/><line class="メッシュ"x1="60"y1="0"x2="60"y2="600"/><line class="メッシュ"x1="80"y1="0"x2="80"y2="600"/><line class="メッシュ"x1="100"y1="0"x2="100"y2="600"/><line class="メッシュ"x1="120"y1="0"x2="120"y2="600"/><line class="メッシュ"x1="140"y1="0"x2="140"y2="600"/><line class="メッシュ"x1="160"y1="0"x2="160"y2="600"/><line class="メッシュ"x1="180"y1="0"x2="180"y2="600"/><line class="メッシュ"x1="200"y1="0"x2="200"y2="600"/><line class="メッシュ"x1="220"y1="0"x2="220"y2="600"/><line class="メッシュ"x1="240"y1="0"x2="240"y2="600"/><line class="メッシュ"x1="260"y1="0"x2="260"y2="600"/><line class="メッシュ"x1="280"y1="0"x2="280"y2="600"/><line class="メッシュ"x1="300"y1="0"x2="300"y2="600"/><line class="メッシュ"x1="320"y1="0"x2="320"y2="600"/><line class="メッシュ"x1="340"y1="0"x2="340"y2="600"/><line class="メッシュ"x1="360"y1="0"x2="360"y2="600"/><line class="メッシュ"x1="380"y1="0"x2="380"y2="600"/><line class="メッシュ"x1="400"y1="0"x2="400"y2="600"/><line class="メッシュ"x1="420"y1="0"x2="420"y2="600"/><line class="メッシュ"x1="440"y1="0"x2="440"y2="600"/><line class="メッシュ"x1="460"y1="0"x2="460"y2="600"/><line class="メッシュ"x1="480"y1="0"x2="480"y2="600"/><line class="メッシュ"x1="500"y1="0"x2="500"y2="600"/><line class="メッシュ"x1="520"y1="0"x2="520"y2="600"/><line class="メッシュ"x1="540"y1="0"x2="540"y2="600"/><line class="メッシュ"x1="560"y1="0"x2="560"y2="600"/><line class="メッシュ"x1="580"y1="0"x2="580"y2="600"/><line class="メッシュ"x1="600"y1="0"x2="600"y2="600"/><line class="メッシュ"x1="0"y1="0"x2="600"y2="0"/><line class="メッシュ"x1="0"y1="20"x2="600"y2="20"/><line class="メッシュ"x1="0"y1="40"x2="600"y2="40"/><line class="メッシュ"x1="0"y1="60"x2="600"y2="60"/><line class="メッシュ"x1="0"y1="80"x2="600"y2="80"/><line class="メッシュ"x1="0"y1="100"x2="600"y2="100"/><line class="メッシュ"x1="0"y1="120"x2="600"y2="120"/><line class="メッシュ"x1="0"y1="140"x2="600"y2="140"/><line class="メッシュ"x1="0"y1="160"x2="600"y2="160"/><line class="メッシュ"x1="0"y1="180"x2="600"y2="180"/><line class="メッシュ"x1="0"y1="200"x2="600"y2="200"/><line class="メッシュ"x1="0"y1="220"x2="600"y2="220"/><line class="メッシュ"x1="0"y1="240"x2="600"y2="240"/><line class="メッシュ"x1="0"y1="260"x2="600"y2="260"/><line class="メッシュ"x1="0"y1="280"x2="600"y2="280"/><line class="メッシュ"x1="0"y1="300"x2="600"y2="300"/><line class="メッシュ"x1="0"y1="320"x2="600"y2="320"/><line class="メッシュ"x1="0"y1="340"x2="600"y2="340"/><line class="メッシュ"x1="0"y1="360"x2="600"y2="360"/><line class="メッシュ"x1="0"y1="380"x2="600"y2="380"/><line class="メッシュ"x1="0"y1="400"x2="600"y2="400"/><line class="メッシュ"x1="0"y1="420"x2="600"y2="420"/><line class="メッシュ"x1="0"y1="440"x2="600"y2="440"/><line class="メッシュ"x1="0"y1="460"x2="600"y2="460"/><line class="メッシュ"x1="0"y1="480"x2="600"y2="480"/><line class="メッシュ"x1="0"y1="500"x2="600"y2="500"/><line class="メッシュ"x1="0"y1="520"x2="600"y2="520"/><line class="メッシュ"x1="0"y1="540"x2="600"y2="540"/><line class="メッシュ"x1="0"y1="560"x2="600"y2="560"/><line class="メッシュ"x1="0"y1="580"x2="600"y2="580"/><line class="メッシュ"x1="0"y1="600"x2="600"y2="600"/></g><rect x="0"y="0"width="680"height="680"stroke="black"stroke-width="4"fill="transparent"/></svg></div>

</html>