如何在 SVG 中设置变换原点 [英] How to set transform origin in SVG

问题描述

我需要使用 javascript 调整和旋转 SVG 文档中的某些元素.问题是，默认情况下，它总是在 (0, 0) - 左上角的原点周围应用变换.

I need to resize and rotate certain elements in SVG document using javascript. The problem is, by default, it always applies the transform around the origin at (0, 0) – top left.

如何重新定义这个变换锚点?

How can I re-define this transform anchor point?

我尝试使用 transform-origin 属性，但它不会影响任何事情.

I tried using the transform-origin attribute, but it does not affect anything.

我是这样做的:

svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');

它似乎没有将关键点设置为我指定的点，尽管我可以在 Firefox 中看到该属性设置正确.我尝试了诸如带括号和不带括号的 center bottom 和 50% 100% 之类的东西.到目前为止没有任何效果.

It does not seem to set the pivotal point to the point I specified although I can see in Firefox that the attribute is correctly set. I tried things like center bottom and 50% 100% with and without parenthesis. Nothing worked so far.

有人可以帮忙吗?

推荐答案

旋转使用 transform="rotate(deg, cx, cy)"，其中 deg 是你想要旋转的度数，(cx, cy) 定义旋转中心.

To rotate use transform="rotate(deg, cx, cy)", where deg is the degree you want to rotate and (cx, cy) define the centre of rotation.

对于缩放/调整大小，您必须通过 (-cx, -cy) 进行转换，然后进行缩放，然后再转换回 (cx, cy).您可以使用矩阵变换来做到这一点::>

For scaling/resizing, you have to translate by (-cx, -cy), then scale and then translate back to (cx, cy). You can do this with a matrix transform:

transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"

其中 sx 是 x 轴上的缩放因子，y 轴上是 sy.

Where sx is the scaling factor in the x-axis, sy in the y-axis.

这篇关于如何在 SVG 中设置变换原点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！