【发布时间】：2017-05-17 15:08:42
【问题描述】：
我正在写一个 lo-fi 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> 元素）。提前致谢！
【问题讨论】：
标签： javascript animation svg yaxis