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

Question

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

也许是关于 transform-origin 的问题，但我已经想动态设置它了。

最小 fiddle 包含由 svg.js 创建的矩形和文本元素（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>

Answer 1

回复评论：这不是巫术，而是一个简单的旋转矩阵，添加了平移以抵消 svg 的默认原点（这是 svg canvas 顺便说一句的左上角）

如果要一起旋转文本和矩形，最简单的方法就是将它们放在同一个组中，然后旋转整个组。另一种方法是围绕矩形中心旋转文本。因此你必须传递第二个和第三个参数来旋转。

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/

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

Rotate element according to another element (sticky)

css

svg.js