javascript - 在 JavaScript 中更改 svg 的属性

Question

我有像这样的 svg 元素，我从谷歌浏览器开发工具中获取了

.

<svg>
  <g transform="translate(250,260) rotate(-90 0 0)">
    //......
  </g>
/svg>

SVG 看起来像这样。我想将翻译更改为 (300,300)

我尝试过这样，

svg.children[0].attributes("transform", "translate(" + 100 / 2 + "," + (100 / 2 + 10) + ") rotate(-90 0 0)");

但它给出的属性不是函数错误。我该如何做到这一点。

Answer 1

Element.attributes 只是注册到元素的所有属性的集合。要设置属性，请使用 Element.setAttribute

https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

示例:svg.children[0].setAttribute("transform", "translate("+ 100/2 + ","+ (100/2 + 10) + ") 旋转(-90 0 0 )");