Question

我有一个类似

的内联SVG

<svg>
  <g id="1" transform="<list of transformations>">
      <path d="">
      <circle cx="" ...>
  </g>
  ...
</svg>

有很多小组，我想用JavaScript / jQuery移动它们。我从网站上的输入中获取值（如旋转）并尝试使用

$("#1").attr("transform", "<list of new transformations>");

但它不起作用。从JS文件执行时，您看不到任何更改。当我在控制台中手动插入它时，我可以使用$("#1").attr("transform")检索值，但它不会导致可见的更改，也不会更改检查器中的元素。在Firefox / Chrome中测试。

如何在运行时使用javascript或jQuery更改svg？

编辑：问题是，所有的id都发生在脚本的另一部分，所以错误的一个被选中了。

Answer 1

总的来说，您的方法似乎是正确的。但是，下面的代码演示了如何做到这一点，所以也许这会告诉你一些微妙的错误。

您可以使用jQuery或vanilla JavaScript修改SVG元素，如下面的代码所示，即使用.attr(attributeName, attributeValue)和jQuery，或.setAttribute(attributeName, attributeValue)用于vanilla JavaScript。

要更改转换，您必须遵循相应的语法（例如，已讨论here）。

$('#b2').attr('fill', 'red');
document.querySelector('#c2').setAttribute('fill', 'magenta');

$('#b2').attr('transform', 'translate(0, 20)');
document.querySelector('#c2').setAttribute('transform', 'rotate(10, 250, 80)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Top row: three identical yellow rectangles.</p>
<p>Bottom row: three similar rectangles. The second is modified using jQuery, the third using vanilla JavaScript</p>
<svg>
  <rect id="a1" x="50"  y="20" width="40" height="20" fill="yellow" />
  <rect id="b1" x="150" y="20" width="40" height="20" fill="yellow" />
  <rect id="c1" x="250" y="20" width="40" height="20" fill="yellow" />

  <rect id="a2" x="50"  y="70" width="40" height="20" fill="yellow" />
  <rect id="b2" x="150" y="70" width="40" height="20" fill="yellow" />
  <rect id="c2" x="250" y="70" width="40" height="20" fill="yellow" />
</svg>

如何使用JavaScript修改内联SVG？

1 个答案: