JavaScript를 사용하여 SVG 다각형의 Y 축 위치 변경

저는 lo-fi SGV를 쓰고 있습니다. 포럼에 게시 할 모험을 선택하십시오. 전방 여행을 시뮬레이션하기 위해 도로 표시를 애니메이션으로 만들려고 시도하지만 JavaScript를 통해 Y 축을 조작하는 방법을 배울 수 없습니다. 현재 내가 가지고있는 것 :JavaScript를 사용하여 SVG 다각형의 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>

그러나 작동하지 않습니다. 가능한 경우 원시 자바 스크립트를 사용하는 매우 간단한 솔루션을 원합니다 (예 : 코드 라이브러리 없음, HTML <animate> 요소 없음). 미리 감사드립니다!

출처

2017-05-17 Anonymous

자바 스크립트 대신 getElementsByClassName, 여러 개의 ID를 가지고 사용하지 않습니다 : 는
또한 애니메이션 "그것을 시도"내가 버튼을 눌러을 보였다 코드를 대신 폴리 (개인 현)의 RECT 사용하고 시도하십시오

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>

출처

2017-05-17 16:23:59

이는 위대하다! 도로 표식이 도로에서 사라져야하는지 확실하지 않은 경우 ... –

방금 이렇게 편집 한 후 다시 돌아가도록 편집했습니다. 필요에 따라 보정하십시오. –

이제는 이상한 글리치가 있습니다. 표식은 다른 표식과는 다른 거리이며, 또한 이동을 모의하지 않습니다. 그러나 어느 방법을 사용해도 코드를 훔치고 싶지는 않습니다. 배우기 만하면 충분합니다. 이 문제를 해결하면 즉시 답변을 수락하겠습니다. 그렇지 않은 경우 다른 답변을 기다리고 이것이 최고의 하루가 될 경우 수락합니다 :). –

JavaScript를 사용하여 SVG 다각형의 Y 축 위치 변경

답변

관련 문제