我正在尝试旋转文本块，应该始终粘在红色矩形的底部(像在Figma，但更简单)。例如，如果我将矩形旋转180度，文本应该在顶部，它不应该进入矩形视觉部分或高度偏离它。我怎么才能到达那里?
可能是关于transform-origin的问题，但是我已经在尝试动态设置它的时候弄碎了我的头。
有最小的fiddle包含由svg.js创建的rect和文本元素(svg.js不是deal的一部分，所以你可以用纯css来做):
https://jsfiddle.net/8h4q0fLc/1/
代码如下:
<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>
回复评论:这不是巫术，而是一个简单的旋转矩阵，添加了翻译来抵消svg的默认原点(这是svg画布的左上角)
如果你想旋转文本和矩形在一起，你可以做的最简单的事情是把它放在同一个组，而不是旋转整个组。另一种方法是围绕矩形的中心旋转文本。因此，你必须传递第二个和第三个参数来旋转。
const {x: rectX, y: rectY, width: rectWidth, height: rectHeight, cx, cy} = rect.bbox();
rect.on('resizing', function() {
text.rotate(rect.transform('rotation'), cx, cy);
});
工作方案:https://jsfiddle.net/Fuzzy/d28cbvjz/