Javascript 如何使rect svg元素不转义到svg的viewBox

我有一个SVG

<svg id='mainSvg' viewBox='0 0 1920 1080'>

    <rect id='rectangle' x='800' y='800'/>

  </svg>

在最后一个函数move（）中，我试着说

如果（Xposition==0）{leftKey=false}

，它可以短暂工作，但如果用户继续按左箭头，则矩形将再次开始移动并退出viewBox

此外，默认情况下，箭头键的值为false

---

关于如何解决这个问题，你有什么想法吗？

Math.min（Math.max（xPosition+movementspeed，0），svgWidth rectangleWidth）

--只要得到元素的宽度，你就可以处理好吗？谢谢你的评论@NiettheDarkAbsol，对此不太确定，我仍然是编码方面的一个新手你试图限制输出（元素的位置）通过限制输入（按键状态）。为什么不把输出限制在。。。限制输出？@NiettheDarkAbsol但如何限制元素位置？我必须在哪里实现您在上面编写的代码。。。？再次抱歉，我只是一个初学者：（@NiettheDarkAbsol好的，我让它工作了，非常感谢，你能再解释一下它是如何工作的吗？

    function keyDown(event) {
  if (event.key === 'ArrowLeft' || event.key === 'a') {
    leftKey = true;
    aKey = true;
  } else if (event.key === 'ArrowRight' || event.key === 'd') {
    rightKey = true;
    dKey = true;
  }
}

function keyUp(event) {
  if (event.key === 'ArrowLeft' || event.key === 'a') {
    leftKey = false;
    aKey = false;
  } else if (event.key === 'ArrowRight' || event.key === 'd') {
    rightKey = false;
    dKey = false;
  }
}

function move() {
  let xPosition = parseInt(rectangle.getAttribute('x'));
  const movmentSpeed = 10;
  //if right arrow key,d  is pressed
  if (rightKey) {
    rectangle.setAttribute('x', xPosition + movmentSpeed);

      //if right arrow key,a  is pressed
  } else if (leftKey) {
    rectangle.setAttribute('x', xPosition - movmentSpeed)

    if(xPosition === 0){
      leftKey = false;  
    }

  }
  setTimeout(move, 10);
}