svg - 如何在SVG中设置变换原点

我需要使用JavaScript调整SVG文档中的某些元素的大小并旋转它们。问题是，默认情况下，它始终围绕(0, 0)(左上角)处的原点应用变换。

如何重新定义此变换 anchor ？

我尝试使用transform-origin属性，但它不会影响任何内容。

这是我的方法:

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

尽管我可以在Firefox中看到正确设置了属性，但似乎没有将枢轴点设置为我指定的点。我尝试了带或不带括号的center bottom和50% 100%之类的东西。到目前为止没有任何工作。

有人可以帮忙吗？

最佳答案

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

要缩放/调整大小，您必须先按(-cx，-cy)进行转换，然后进行缩放，然后再转换回(cx，cy)。您可以使用matrix transform做到这一点:

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

其中sx是x轴的比例因子，sy是y轴。

关于svg - 如何在SVG中设置变换原点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6711610/