使用变量和JavaScript设置SVG属性

Question

我希望能够让一个SVG元素可平移，通过仅操作viewBox属性的前两个值似乎是可能的。但我无法确定是否可以在setAttribute内使用变量。

以下是我的JavaScript代码:

function panSvg(event) {
    var x = event.clientX - 498;
    var y = event.clientY - 183;
    //show coordinates in a <p> element
    document.getElementById("opf").innerHTML = "X: " + x + " Y: " + y;
    //make viewBox react to mouse movement
    document.getElementById("svag").setAttribute("viewBox", y x 100 100);   
}

HTML：

<svg id="svag" onmousemove="panSvg(event)" width="600" height="600" viewBox="0 0 100 100">

我知道或感觉到，在用户定义的左右角值（在html中最初为0 0）中，将x和y放置可能会有些困难，但也许我只需要正确的语法？ （目前我只想看看它是否对viewBox产生影响，我还没有弄清楚如何设置x和y以进行适当的平移）。 我看到了太过复杂的缩放解决方案，而我却相当容易地实现了缩放，希望这个问题也有一个优雅的解决方案。

- HONDDAACCORD

Answer 1

如果您已经有 viewBox 属性，您可以使用 DOM 操作它。无需解析或字符串拼接。

function panSvg(evt) {
  var x = (evt.clientX - 50) / 2;
  var y = (evt.clientY - 50) / 2;
  //make viewBox react to mouse movemen;
  root = document.getElementById("svag");
  root.viewBox.baseVal.x = x;
  root.viewBox.baseVal.y = y;
}

<svg id="svag" onmousemove="panSvg(evt)" width="600" height="600" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="blue"/>
</svg>

- Robert Longson

Answer 2

您可以简单地使用连接的变量字符串：

document.getElementById("svag").setAttribute("viewBox", y + " " + x + " 100 100");

- Spencer Wieczorek

---

你比我快了六秒钟 =P - Jonathan Lam

我们的间距完全相同，这里有一个赞 :) - Spencer Wieczorek

@SpencerEieczorek 哈哈，你也是。 - Jonathan Lam

Answer 3

使用es6模板字符串可以更轻松地进行字符串拼接。您可以像这样在字符串中使用变量：

document.getElementById("svag").setAttribute("viewBox",`${y} ${x} 100 100`);

- Holger Will

Answer 4

我认为你不能使用变量，但可以通过拼接将其转换为字符串，并操纵它以使空格的模式与所需输出相似。 例如，更改以下行：

document.getElementById("svag").setAttribute("viewBox", y x 100 100); 

转换为：

document.getElementById("svag").setAttribute("viewBox", y + " " + x + " 100 100"); 

- Jonathan Lam