ローファイな SGV を書いています。自分の冒険を選んでフォーラムに投稿してください。前方移動をシミュレートするために道路標示をアニメーション化しようとしていますが、JavaScript を介して Y 軸を操作する方法がわかりません。現時点で私は持っています：
<!DOCTYPE html>
<html>
<!-- Decide if you trust the driver. If you do, comment yes, if not, comment no. This will change the way the story progresses... -->
<head>
<title>Lost on an Alien Planet. Episode One: A New Moon. </title>
</head>
<body>
<svg width="550" height="550">
<rect x="0" y="0" width="550" height="220" fill="black" />
<circle id="moon" cx="175" cy="120" r="100" stroke="#ee1015" stroke-width="2" fill="#ff1519" />
<circle id="top_asteroid" cx="290" cy="50" r="17" stroke="grey" stroke-width="2" fill="#313131" />
<circle cx="220" cy="110" r="20" stroke="grey" stroke-width="2" fill="#131313" />
<circle cx="20" cy="200" r="15" stroke="grey" stroke-width="2" fill="#242525" />
<rect x="0" y="219" width="550" height="282" fill="blue" />
<polygon points="100,500 180,220 346,220 426,500"
style="fill:black;stroke:black;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,220 265,220 265,240 250,240"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,250 265,250 265,270 250,270"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,280 265,280 265,300 250,300"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,310 265,310 265,330 250,330"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,340 265,340 265,360 250,360"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,370 265,370 265,390 250,390"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,400 265,400 265,420 250,420"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,430 265,430 265,450 250,450"
style="fill:white;stroke:white;stroke-width:2" />
<polygon class="roadmarking" id="base_roadmarking" points="250,460 265,460 265,480 250,480"
style="fill:white;stroke:white;stroke-width:2" />
</svg>
<script>
setInterval(function(){
var marking = document.getElementById("base_roadmarking");
var pos = 0;
frame_first = true;
elem_pos = 0;
if(frame_first) {
elem_pos = marking.style.top;
pos += 10;
elem_pos = pos + 'px';
}
else {
elem_pos = marking.style.top;
pos -= 10;
elem_pos = pos + 'px';
}
}, 500);
</script>
<p>You wake from a dark dream to find yourself on an alien planet. Ahead is a red moon orbited by asteroids that seem to move with a disconcerting quickness. Your vehicle drives slowly toward the horizon. All around you are the sounds of strange wolf-like creatures howling. You are sitting in the passenger seat, unsure where your driver is taking you. But you trust him... at least, you think you trust him...</p>
</body>
</html>
しかし、それは機能していません。可能であれば、未加工の JavaScript を使用した非常に単純なソリューションを希望します (コード ライブラリや HTML<animate>要素を使用しないなど)。前もって感謝します！