如何在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轴的比例因子,sy是y轴.
Where sx is the scaling factor in the x-axis, sy in the y-axis.
这篇关于如何在SVG中设置变换原点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!