Is it possible to rotate a text block so that it remains anchored to the bottom of a red rectangle, even when the rectangle is rotated? Similar to how it works in Figma, but simpler. For example, if I rotate the rectangle by 180 degrees, the text should be at the top without overlapping or straying far from the visual bounds of the rectangle. How can this be achieved?
I've considered using transform-origin, but I'm struggling to dynamically set it up.
Here is a basic example with rectangle and text elements created using svg.js (you can achieve this with pure CSS as well):
https://jsfiddle.net/8h4q0fLc/1/
Below is the code snippet:
<head>
<link rel="stylesheet" href="https://rawcdn.githack.com/svgdotjs/svg.select.js/3.0.1/dist/svg.select.min.css">
</head>
<body>
<div id="editor"></div>
<script src="https://rawcdn.githack.com/svgdotjs/svg.js/2.7.1/dist/svg.min.js" defer></script>
<script src="https://rawcdn.githack.com/svgdotjs/svg.select.js/3.0.1/dist/svg.select.min.js" defer></script>
<script src="https://rawcdn.githack.com/svgdotjs/svg.resize.js/1.4.3/dist/svg.resize.min.js" defer></script>
<script>
const editor = SVG('editor').size('100vw', '100vh');
const rect = editor.rect(100, 100).fill('red').move(50, 50).selectize().resize();
const {x: rectX, y: rectY, width: rectWidth, height: rectHeight} = rect.bbox();
const text = editor.text(`${rectWidth} x ${rectHeight}`).resize();
const { width: textWidth } = text.rbox();
text.move(rectX + (rectWidth - textWidth)/2, rectY + rectHeight);
rect.on('resizing', function() {
text.rotate(this.transform('rotation'));
});
</script>
</body>