使用animateTransform时如何指定x-y旋转点? [英] How to specify the x-y rotation point when using animateTransform?
问题描述
我想使用animateTransform连续旋转SVG图像.所以我们开始:
I want to use animateTransform to rotate an SVG image continuously. So here we go:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="768px" enable-background="new 0 0 100 100" xml:space="preserve">
<g transform="translate(100, 100)">
<rect fill="#FE9FFF" width="100px" height="100px">
<animateTransform attributeName="transform" type="rotate"
from="0" to="360" dur="20s" repeatDur="indefinite"/>
</rect>
</g>
</svg>
这有效.
现在:我想更改以上内容,以便块围绕其中心而不是其左上角旋转.我知道,如果要围绕块的中心静态旋转块,可以执行以下操作:
Now: I would like to change the above, so that the block rotates around its center and not its top left corner. I know that if I want to rotate the block statically around its center, I can do this:
<g transform="rotate(30, 50, 50)">
<rect fill="#FE9FFF" width="100px" height="100px">
</rect>
</g>
我的问题是-如何管理围绕图块中心的连续动画旋转?我看过规范和几个
My question is - how do I manage a continuous animated rotation around the block's center? I have looked at the spec and a couple of other related questions on SO, but I'm having trouble implementing the explanations supplied.
谢谢.
推荐答案
http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement
"from","by"和"to"属性采用与给定转换类型相同的语法表示的值:
(...)
对于type ="rotate",每个单独的值都表示为< rotate-angle> [< cx>< cy>]
The ‘from’, ‘by’ and ‘to’ attributes take a value expressed using the same syntax that is available for the given transformation type:
(...)
For a type="rotate", each individual value is expressed as <rotate-angle> [<cx> <cy>]
如果提供两个附加值cx和cy,则可以指定旋转的中心.
You can specify the center for the rotation if you provide 2 additional values, cx and cy.
因此,对于您的代码,我在"from"和"to"属性中添加"50 50":
So, for your piece of code, I add "50 50" in the "from" and "to" attribute :
<rect fill="#FE9FFF" width="100px" height="100px">
<animateTransform attributeName="transform" type="rotate"
from="0 50 50" to="360 50 50" dur="20s" repeatDur="indefinite"/>
</rect>
它可以与Opera,Safari和Chrome的最新版本以及Firefrox 4 Beta和Batik一起使用.
It work with latest version of Opera, Safari and Chrome, also Firefrox 4 Beta and Batik.
这篇关于使用animateTransform时如何指定x-y旋转点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!