javascript - 为什么 setAttribute 在带有 SVG 的 Javascript 中不起作用？

Question

我是 SVG 和 Javascript 的初学者，如果有人可以帮助我，我会很高兴。有谁知道为什么在 SVG 和 Javascript 中使用此代码

<g id="package1">

  <rect style="opacity:1;fill:#00b609;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect991" width="1.6536481" height="11.641669" x="145.52083" y="28.447916" />

</g>

<script type="text/javascript" id="move">
  var package1 = document.getElementById("package1");

  package1.setAttribute("transform", "translate(210,120) rotate(-10 50 100)");
</script>

即使应该旋转矩形，它也没有任何反应？

谢谢！

Answer 1

它做某事。你需要把你的rect内部svg元素。

  setTimeout(() => {
    var package1 = document.getElementById("package1");

   package1.setAttribute("transform", "translate(210,120) rotate(-10 50 100)"); 
   }, 2000);

#package1 {
  border: 1pt solid red;
}

<svg id="package1">

  <rect style="opacity:1;fill:#00b609;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect991" width="10.6536481" height="110.641669" x="145.52083" y="28.447916" />

</svg>