Question

我正在尝试旋转SVG内部的路径。

由于在SVG中旋转与通过CSS处理其他html元素的工作方式不同（即SVG中的默认轴是元素的左上角而不是其中心），所以我遇到了很多问题。

我需要以路径的中心点为轴旋转路径。我可以通过将transform-origin设置为50％50％来做到这一点，但是我还需要翻译和缩放路径，并更改transform-origin会模糊翻译。

假装路径是静态大小，我可以通过将x / y包括为“ rotate（90，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坐标，同时保持它们的平移和响应能力。

谢谢

Answer 1

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

变换以相反的顺序应用，因此您希望最后旋转（首先应用），然后首先旋转（最后应用）。

（我添加了填充不透明度，所以您可以看到发生了什么事情）

<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>

围绕其中心旋转可缩放且已翻译的SVG元素

1 个答案: