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

Question

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

如何重新定义此变换 anchor ？

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

我就是这样做的:

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

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

有人可以帮忙吗？

Answer 1

要旋转，请使用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 轴的缩放因子。