根据另一个元素旋转元素粘性

如何解决根据另一个元素旋转元素粘性

我试图旋转应该始终粘在红色矩形底部的文本块（就像在 figma 中一样，但更简单）。例如，如果我将矩形旋转 180 度，文本应该在顶部，并且它不应该进入 rect 视觉部分或高度偏离它。我怎样才能达到这个目标？

也许是关于transform-origin，但我已经打破了我的头脑试图动态设置它。

最小的小提琴包含由 svg.js 创建的 rect 和 text 元素（svg.js 不是交易的一部分，所以你可以用纯 css 来做）：

代码如下：

<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'),cy);
});

工作解决方案：https://jsfiddle.net/Fuzzy/d28cbvjz/