如何使用JavaScript修改内联SVG？

我有一个内嵌SVG，比如

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

...

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

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

$（“#1”）.attr（“转换”，“转换”）；

但它不起作用。从JS文件执行时，您看不到任何更改。当我在控制台中手动插入它时，我可以使用

$（“#1”）.attr（“transform”）

检索值，但它不会导致可见的更改，也不会更改检查器中的元素。在Firefox/Chrome中测试

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

---

编辑：问题是，所有id都出现在脚本的另一部分，因此选择了错误的id。

总体而言，您的方法似乎是正确的。然而，下面的代码演示了如何做到这一点，所以这可能会显示出您正在犯的一些微妙的错误

您可以使用jQuery或vanilla JavaScript修改SVG元素，如下面的代码所示，即使用jQuery的

.attr（attributeName，attributeValue）

，或vanilla JavaScript的

.setAttribute（attributeName，attributeValue）

要更改转换，必须遵循适当的语法（例如，讨论）

$（'#b2'）.attr（'fill'，'red'）；
document.querySelector（'#c2'）.setAttribute（'fill'，'magenta'）；
$（'#b2'）.attr（'transform'，'translate（0,20）'）；
document.querySelector（'#c2'）.setAttribute（'transform'，'rotate（10250,80））

顶行：三个相同的黄色矩形

底行：三个相似的矩形。第二个是使用jQuery修改的，第三个是使用vanilla JavaScript修改的

什么是“”？类似于“旋转（901180522）平移（1110452）比例（1.4）”的东西我看不出有任何问题，在我尝试时它似乎起作用，所以问题一定在其他地方。如果没有一个能证明这个问题的答案，我想你不会得到任何有用的答案。我有多个相同的id，所以选错了一个。