SVG переведет, но не будет вращаться ⇐ Javascript

[Anonymous]

Этот прямо переводится нормально, но не будет вращаться, но я не вижу опечатки или синтаксической ошибки.
[Firefox 138.0 (64bit) на opensuse tumbleweed] < /p>

Код: Выделить всё

    
//https://github.com/amitonline/true-ruler/blob/main/js/true-ruler.js
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("id","sliderControl");
svg.setAttribute("viewBox","0 0 100% 100%");
svg.setAttribute("width","100%");
svg.setAttribute("height","200px");

var svgNS = svg.namespaceURI;

const periodPill = document.createElementNS(svgNS, "rect");
periodPill.setAttribute("x", "0");
periodPill.setAttribute("y", "0");
periodPill.setAttribute("width", "30");
periodPill.setAttribute("height", "30");
periodPill.setAttribute("transform-origin", "center");
periodPill.setAttribute("transform", "rotate(45)");
periodPill.setAttribute("transform", "translate(532,85)");
periodPill.setAttribute("fill", "#55aaff");
periodPill.setAttribute("opacity","100%");
periodPill.setAttribute("cursor", "move");
svg.appendChild(periodPill);

document.body.appendChild(svg);

< /code>
Следующие работы и основаны на отзывах отличных участников < /p>


//https://github.com/amitonline/true-ruler/blob/main/js/true-ruler.js
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("id","sliderControl");
svg.setAttribute("viewBox","0 0 100% 100%");
svg.setAttribute("width","100%");
svg.setAttribute("height","200px");

var svgNS = svg.namespaceURI;
const periodPill = document.createElementNS(svgNS, "rect");
periodPill.setAttribute("x", "-15");
periodPill.setAttribute("y", "-15");
periodPill.setAttribute("width", "30");
periodPill.setAttribute("height", "30");
//periodPill.setAttribute("transform-origin", "center");
periodPill.setAttribute("transform", "translate(532,100) rotate(45)");
// periodPill.setAttribute("x", "532");
// periodPill.setAttribute("y", "200");
//periodPill.setAttribute("transform", "translate(532,85)");
periodPill.setAttribute("fill", "#55aaff");
periodPill.setAttribute("opacity","100%");
periodPill.setAttribute("cursor", "move");
svg.appendChild(periodPill);

document.body.appendChild(svg);

Во -первых, я сосредоточил новый прямо на происхождении родителей, а затем в команде преобразования я поменял переводчику перед строфом перед вращающейся строфом

Подробнее здесь: https://stackoverflow.com/questions/796 ... ont-rotate