使用JS更改svg元素的位置 [英] Change Position of svg element using JS

问题描述

试图制作一个在按下按钮时移动的svg矩形.现在，我只希望x被一个函数修改.

Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function.

function modX()
{
  document.getElementById("rectangle").transform = 'translate(295 115)';
}
var x = 20;
var y = 20;
modX();

<svg  width="1000" height="1000" >
  <rect id="rectangle" x="0" y="20" width="100" height="100" 
  style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</svg>

我对代码很陌生，因此请避免使用CSS或jquery.

I'm fairly new to code so please avoid css or jquery.

推荐答案

您可以使用javaScript document.getElementById("rectangle").setAttribute('x'，X_value)更改其x将 X_value 设置为您想要更改的值.

you can change its x by using javaScript document.getElementById("rectangle").setAttribute('x', X_value) set the X_value to the value you want it to change.

这篇关于使用JS更改svg元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！