使用 JavaScript 改变 SVG 多边形的 Y 轴定位
Altering the Y-axis positioning of an SVG polygon with JavaScript
我正在写一个 lo-fi SGV 选择你自己的冒险到 post 在论坛上。我正在尝试为道路标记设置动画以模拟向前行驶，但我不知道如何通过 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 不会采用多个 ID，而是使用 getElementsByClassName ：
另外请使用 rect 而不是 poly（个人偏好），并尝试我展示的代码
按按钮 "try it" 播放动画
function run() {
setInterval(function(){
var marking = document.getElementsByClassName("roadmarking");
var i = 0;
for (i = 0; i < marking.length; i++) {
frame_first = marking[i].y.baseVal.value;
var show= document.getElementById("show");
//show.innerHTML = marking[i].y.baseVal.value;
if(frame_first<500) {
marking[i].y.baseVal.value += 10;
}
else {
marking[i].y.baseVal.value -= 290;
}
}
},500);}
<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" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="490" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="220" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="250" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="280" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="310" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="340" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="370" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="400" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="430" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="460" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
</svg>
<script>
</script>
<p id="show">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>
<br><button onclick="run()">Try it</button>
</body>
</html>
我正在写一个 lo-fi SGV 选择你自己的冒险到 post 在论坛上。我正在尝试为道路标记设置动画以模拟向前行驶，但我不知道如何通过 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 不会采用多个 ID，而是使用 getElementsByClassName ：
另外请使用 rect 而不是 poly（个人偏好），并尝试我展示的代码
按按钮 "try it" 播放动画
function run() {
setInterval(function(){
var marking = document.getElementsByClassName("roadmarking");
var i = 0;
for (i = 0; i < marking.length; i++) {
frame_first = marking[i].y.baseVal.value;
var show= document.getElementById("show");
//show.innerHTML = marking[i].y.baseVal.value;
if(frame_first<500) {
marking[i].y.baseVal.value += 10;
}
else {
marking[i].y.baseVal.value -= 290;
}
}
},500);}
<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" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="490" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="220" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="250" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="280" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="310" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="340" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="370" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="400" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="430" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
<rect class="roadmarking" id="base_roadmarking" x="250" y="460" width="15" height="20"
style="fill:white;stroke:white;stroke-width:2" />
</svg>
<script>
</script>
<p id="show">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>
<br><button onclick="run()">Try it</button>
</body>
</html>