围绕中心旋转可缩放和平移的SVG元素

Question

围绕中心旋转可缩放和平移的SVG元素

3

我正在尝试旋转SVG中的路径。因为在SVG中旋转与其他HTML元素通过CSS不同（即SVG的默认轴是元素的左上角而不是中心），我遇到了很多问题。我需要使用路径的中心点作为轴来旋转它们。我可以通过将transform-origin设置为50% 50%来实现，但是我还需要平移和缩放路径，并且更改transform-origin会使翻译失真。假设路径是静态大小，我可以通过在“rotate(90, x, y)”中包含x/y作为路径宽度/高度的一半来实现。然而，SVG响应式地缩放以适应窗口大小，因此路径的宽度/高度是动态的。我没有找到使用百分比的方法来正确设置旋转轴的位置。我认为我可能错过了一些非常简单的东西，但我无法自己弄清楚。如何使用它们的中心作为轴旋转这些路径-具有动态大小的路径以及翻译？（我还尝试将某些变换应用于父元素，但这只导致路径剪切）

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
        <g>
        <path class="A" transform="translate(1000 1000) rotate(0) scale(20)" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z"/>
        <path class="B" transform="translate(1000 1000) rotate(45) scale(20)" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z"/>
        <path class="C" transform="translate(1000 1000) rotate(90) scale(20)" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z"/>
        </g>
    </svg>

我无法使A、B和C的中心点在保持平移和响应性的同时共享一个x/y坐标。

谢谢

- JMcFar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Mullany · Accepted Answer

最简单的方法是在原点绘制原始形状，然后旋转、缩放并将它们移动到您想要的最终位置。因此，将初始相对m更改为绝对M，并移动初始绘图点，使箭头的中心与原点重合。（您需要添加“l”以切换其余路径回到相对绘制。）

变换是按相反顺序应用的，因此您希望最后进行旋转（首先应用），并且首先进行平移（最后应用）。

（我添加了fill-opacity，这样您可以更好地看到发生了什么）

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000">
        <g>
        <path class="A" transform="translate(1000 1000) scale(20) rotate(0)"  d="M 0.75,-14.3 l16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" fill-opacity="0.5"/>
        <path class="B" transform="translate(1000 1000) scale(20) rotate(45)" d="M 0.75,-14.3 l16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" fill-opacity="0.5"/>
        <path class="C" transform="translate(1000 1000) scale(20) rotate(90)" d="M 0.75,-14.3 l16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" fill-opacity="0.5"/>
        </g>
    </svg>