html - transform-origin 指向 viewbox

Question

晚安

我有一个带有路径的 SVG。这个 SVG 有一个 viewBox 来控制纵横比，但问题是这个图形(路径)当它要旋转时，变换原点(旋转点)是设置为 viewBox 的 0 点而不是 SVG 的点。我想用浏览器显示的右 Angular 或左 Angular 的旋转点旋转它(在我的例子中是 SVG 的 Angular ，而不是尺寸变化时受限制的 View 框)。我尝试使用组并使用所有可用单位，cm、mm、pt、em、ex、px，...但是所有这些都在 viewBox 中工作，我看不到相对单位和绝对单位之间的区别。我尝试了比例 (%)，但似乎至少在 Firefox 中不起作用。和中心一样，右，左...

无论如何，我认为单位不会解决问题。有些东西我没看到。

Pd:可以借助JS或者其他脚本语言。

非常感谢，

Answer 1

你如何旋转路径？大概你正在使用这样的东西？

<path d="..." transform="rotate(45)" />

此版本的 rotate() 围绕当前原点旋转。默认情况下，它是文档的左上角 (0,0)(不一定是 viewBox 的左上角)。

要围绕不同的点旋转，请使用采用 Angular 和旋转原点的其他版本的旋转:

<path d="..." transform="rotate(45, 150,150)" />