This rect translates fine but won't rotate but I can't see the typo or syntax error. [Firefox 138.0(64bit) on openSUSE Tumbleweed]
<script id="svgScript" type="text/javascript">
//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);
</script>
The following works and is based on the feedback from the excellent contributors
<body>
<script id="svgScript" type="text/javascript">
//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);
</script>
</body>
Firstly, I centred the new rect on the parent's origin then in the transform command, I swapped the translate stanza before the rotate stanza
You're facing this issue because the transform attribute on an SVG element only takes one value and the second setAttribute('transform', ...)
is overwriting the first one.
To fix this, you need to combine both transforms into a single transform string as below:
periodPill.setAttribute("transform", "translate(532,85) rotate(45)");