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

Posted

技术标签:

【中文标题】围绕其中心旋转可缩放和翻译的 SVG 元素【英文标题】:Rotate a scalable and translated SVG element around its center 【发布时间】:2019-08-01 09:00:50 【问题描述】:

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

因为在 SVG 中旋转的工作方式与通过 CSS 处理其他 html 元素的方式不同(即 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 坐标,同时保持它们的平移和响应能力。

谢谢

【问题讨论】:

【参考方案1】:

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

转换以相反的顺序应用,因此您希望最后旋转(首先应用)和先平移(最后应用)。

(我添加了填充不透明度,以便您可以更好地看到正在发生的事情)

<svg xmlns="http://www.w3.org/2000/svg"   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>

【讨论】:

我在 Adob​​e Illustrator 中制作了 SVG。实际上,我从未想过我有机会理解所有“d=”数据(它跨越项目的多个页面)。但是,我只需要对这些看起来相对简单的箭头进行更改...明天我将不得不对此进行更多研究,但是如果您能告诉我-我的理解是否正确,即元素的“起源”本质上是元素的最顶部,最左侧的点,并且您所做的是告诉元素相对于其原点绝对绘制其 x 和 y 的一半? 我还不完全理解 d 属性的命令,但这绝对是答案,并且 100% 有效。感谢您的帮助。 嗨,JMcFar - 完全正确。路径看起来很吓人——但通过一些练习,它们并不难遵循。 Mozilla 对路径命令有很好的介绍。 developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

以上是关于围绕其中心旋转可缩放和翻译的 SVG 元素的主要内容,如果未能解决你的问题,请参考以下文章

围绕其中心旋转 GLUT 位图/笔划字符串?

Pygame,围绕中心旋转使图像消失

如何计算围绕其中心旋转的矩形的边界框?

使用 CSS3 围绕自己的中心旋转 SVG 路径

在没有viewBox的情况下围绕中心缩放?

SVG css旋转坚持而不是围绕中心旋转