Question

我想让一个SVG元素泛泛，似乎只能通过操纵viewBox属性的前两个值来实现。但我无法弄清楚是否可以在setAttribute中使用变量。

到目前为止，这是我的js代码：

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进行正确的平移）。我看到了太复杂的缩放解决方案，我很容易实现，我希望有一个优雅的解决方案。

Answer 1

您可以简单地使用一串连接变量：

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

Answer 2

我不相信你可以使用变量，但只需通过连接将其变成一个字符串并对其进行操作，以便空间模式模仿所需的输出。

即，改变这一行：

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

到此：

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

Answer 3

如果您已有viewBox属性，则可以使用DOM来操作它。不需要解析或字符串连接。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 4

使用es6模板字符串，字符串连接变得更容易。您可以在字符串中使用变量，如下所示：

var r = new RegExp('anti.*esis', 'ig')

document.write('antithesis'.match(r), '<br/>') // ["antithesis"]
document.write('antihero'.match(r), '<br/>') // null

使用变量

4 个答案: