我想使用 animateTransform 连续旋转 SVG 图像。那么我们开始吧:
<?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>
这有效。
现在:我想更改上面的内容,以便块围绕其中心而不是左上角旋转。我知道如果我想围绕其中心静态旋转块,我可以这样做:
<g transform="rotate(30, 50, 50)">
<rect fill="#FE9FFF" width="100px" height="100px">
</rect>
</g>
我的问题是 - 如何管理围绕块中心的连续动画旋转?我看过spec http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement和几个其他相关问题 https://stackoverflow.com/questions/2437542/simulate-pivot-rotate-using-transform-in-svg就这样,但我在执行所提供的解释时遇到了困难。
提前致谢。
http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement
“from”、“by”和“to”属性采用与给定转换类型可用的相同语法表示的值:
(...)
对于 type="rotate",每个单独的值表示为 [ ]
如果提供 2 个附加值 cx 和 cy,则可以指定旋转中心。
因此,对于您的代码段,我在“from”和“to”属性中添加“50 50”:
<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。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)