在JavaScript中更改svg的属性

Question

我从谷歌浏览器开发者工具

获取了这样的svg元素loos

<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

SELECT TYPE(e.job) FROM Employee e WHERE e.job IS NOT NULL 只是注册到元素的所有属性的集合。要设置属性，请使用Element.attributes

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

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

示例：Element.setAttribute

Answer 2

.attributes不接受参数，但返回NamedNodeMap，它是在元素处注册的属性节点的实时集合。您可以在使用document.querySelector()，Element.querySelector()

后直接设置属性

document.querySelector("svg")
.querySelector("g")
.transform = "translate(" 
             + 100 / 2 + "," 
             + (100 / 2 + 10) + ") rotate(-90 0 0)";

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