javascript - 使用 JavaScript 更改 SVG 元素的 X 和 Y 值

Question

我有一个 tspan 元素，我希望它根据鼠标位置移动。

$(document).mousemove(function(e) {
  //something that makes it so the x value is the same as e.pageX
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 1778.426 150.81301">
<g transform="translate(0 -146.19)">
<rect x="15.368" y="225.71" width="1723.8" height="11.733"/>
<rect id="bar" transform="rotate(90)" x="215.19" y="-15.368" width="32.781" height="11.733"/>
</svg>

不使用转换怎么办？

Answer 1

你可以直接用attr()设置它的属性，例如...

<script>
  $(document).mousemove(function(e) {
  //something that makes it so the x value is the same as e.pageX
    $('#bar').attr('x', e.pageX);
});
</script>

我在 JSBIN 上放置了一个小型演示沙箱:JSBIN Demo .

您可能需要进一步调整它，但我在文档 mousemove 事件中看到 #bar 元素发生了一些移动。