如何在 SVG 中为特定元素在其自身轴上的旋转设置动画(仅限 SVG 动画标签)?
How to animate the rotation of a specific element on its own axis in an SVG (SVG animation tag only)?
我想为这两个旗帜设置动画,将它们从左到右(或从右到左)旋转一点,但我想在它们自己的轴上做,我不知道该怎么做,这个是我用正确的标志得到的结果:
(我知道的不多,但我一直在研究如何用svg制作动画,我知道旋转接收degrees
、x
和y
位置,但是我看不太清楚
<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864">
<g id="Grupo_76" data-name="Grupo 76" transform="translate(-682 -189)">
<g id="right-flag" transform="translate(-283.11 -185.563) rotate(11)">
<!-- How can I rotate it on its own axis -->
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="9s"
repeatCount="indefinite"
/>
<path id="Trazado_128" data-name="Trazado 128" d="M5074,508.573v427.9" transform="translate(-3544.956 -60.656)"
fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1" data-name="Rectángulo 1" width="319.344" height="196.249" transform="translate(0 0)"
fill="#999" />
<rect id="Rectángulo_2" data-name="Rectángulo 2" width="319.344" height="196.249" transform="translate(0 0)"
fill="rgba(92,92,92,0.77)" />
</g>
</g>
<g id="left-flag" transform="matrix(0.978, -0.208, 0.208, 0.978, -779.086, 487.436)">
<path id="Trazado_128-2" data-name="Trazado 128" d="M5074,508.573V936.468"
transform="translate(-3239.704 -60.658)" fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53-2" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1-2" data-name="Rectángulo 1" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(208,191,184,0.35)" />
<rect id="Rectángulo_2-2" data-name="Rectángulo 2" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(53,53,53,0.77)" />
</g>
</g>
<circle id="Elipse_1" data-name="Elipse 1" cx="432" cy="432" r="432" transform="translate(682 189)"
fill="rgba(208,191,184,0.35)" opacity="0.83" />
</g>
</svg>
该文件是从 adobe XD 导出的,我添加了动画标签。
我总是建议,当您创建要在网络上使用的 svg 时,最好在 Inkscape 中创建它们,因为它是一个原生 svg 编辑器,可以生成更清晰、最干净的代码。
现在是好东西:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="864" height="864" viewBox="0 0 864 864" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="aa.svg">
<path style="opacity:0.82999998" d="M 864,432 A 432,432 0 0 1 432,864 432,432 0 0 1 0,432 432,432 0 0 1 432,0 432,432 0 0 1 864,432 Z" id="Elipse_1"/>
<g inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="M 450.37451,356.87985 368.72733,776.91812"/>
<path d="M 478.9346,173.03462 792.41135,233.96833 754.96528,426.61167 441.48853,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
<g inkscape:transform-center-y="42.976369" inkscape:transform-center-x="148.56932">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="m 413.62551,356.87985 81.64718,420.03827"/>
<path d="M 385.06542,173.03462 71.588665,233.96833 109.03474,426.61167 422.51149,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="5 432 432" to="-5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
</svg>
基本上你必须将每个标志的组旋转中心设置为背景圈的旋转中心。在 Inkscape 中这是一项简单的任务,我认为 Illustrator 也应该使它变得简单。
在这种情况下,旗帜的旋转中心是 inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369"
,这基本上意味着原始旗帜的组旋转中心在 x 轴上平移了 -148.56934px,在 y 轴上平移了 42.976369px 以使其重合与圆的旋转中心。
然后让我们添加动画。由于圆的宽度和高度与视图框的宽度和高度一致,即 864px,您只需计算一半,在本例中为 432px,这将它放在两个轴的 432px 处。这是动画本身:<animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
解释:你在 from
的两个轴上设置 432 作为标志的动画旋转中心,稳定 -5 度和 5 度与 [=14 相同的旋转中心=],设置一个 duration
秒和 repeatCount
你可以建立一个数字来说明重复的次数或无限循环永远。结果是旗帜将在 0.5 秒内在其中心从 -5 度旋转到 5 度,并且会一直旋转下去。
对于另一个标志,只需复制并粘贴相同的动画,但交换旋转度数的值,使第二个标志沿另一个方向旋转。
就是这样,希望你明白。如有任何疑问,请添加评论。
我想为这两个旗帜设置动画,将它们从左到右(或从右到左)旋转一点,但我想在它们自己的轴上做,我不知道该怎么做,这个是我用正确的标志得到的结果:
(我知道的不多,但我一直在研究如何用svg制作动画,我知道旋转接收degrees
、x
和y
位置,但是我看不太清楚
<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864">
<g id="Grupo_76" data-name="Grupo 76" transform="translate(-682 -189)">
<g id="right-flag" transform="translate(-283.11 -185.563) rotate(11)">
<!-- How can I rotate it on its own axis -->
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="9s"
repeatCount="indefinite"
/>
<path id="Trazado_128" data-name="Trazado 128" d="M5074,508.573v427.9" transform="translate(-3544.956 -60.656)"
fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1" data-name="Rectángulo 1" width="319.344" height="196.249" transform="translate(0 0)"
fill="#999" />
<rect id="Rectángulo_2" data-name="Rectángulo 2" width="319.344" height="196.249" transform="translate(0 0)"
fill="rgba(92,92,92,0.77)" />
</g>
</g>
<g id="left-flag" transform="matrix(0.978, -0.208, 0.208, 0.978, -779.086, 487.436)">
<path id="Trazado_128-2" data-name="Trazado 128" d="M5074,508.573V936.468"
transform="translate(-3239.704 -60.658)" fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53-2" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1-2" data-name="Rectángulo 1" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(208,191,184,0.35)" />
<rect id="Rectángulo_2-2" data-name="Rectángulo 2" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(53,53,53,0.77)" />
</g>
</g>
<circle id="Elipse_1" data-name="Elipse 1" cx="432" cy="432" r="432" transform="translate(682 189)"
fill="rgba(208,191,184,0.35)" opacity="0.83" />
</g>
</svg>
该文件是从 adobe XD 导出的,我添加了动画标签。
我总是建议,当您创建要在网络上使用的 svg 时,最好在 Inkscape 中创建它们,因为它是一个原生 svg 编辑器,可以生成更清晰、最干净的代码。 现在是好东西:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="864" height="864" viewBox="0 0 864 864" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="aa.svg">
<path style="opacity:0.82999998" d="M 864,432 A 432,432 0 0 1 432,864 432,432 0 0 1 0,432 432,432 0 0 1 432,0 432,432 0 0 1 864,432 Z" id="Elipse_1"/>
<g inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="M 450.37451,356.87985 368.72733,776.91812"/>
<path d="M 478.9346,173.03462 792.41135,233.96833 754.96528,426.61167 441.48853,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
<g inkscape:transform-center-y="42.976369" inkscape:transform-center-x="148.56932">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="m 413.62551,356.87985 81.64718,420.03827"/>
<path d="M 385.06542,173.03462 71.588665,233.96833 109.03474,426.61167 422.51149,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="5 432 432" to="-5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
</svg>
基本上你必须将每个标志的组旋转中心设置为背景圈的旋转中心。在 Inkscape 中这是一项简单的任务,我认为 Illustrator 也应该使它变得简单。
在这种情况下,旗帜的旋转中心是 inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369"
,这基本上意味着原始旗帜的组旋转中心在 x 轴上平移了 -148.56934px,在 y 轴上平移了 42.976369px 以使其重合与圆的旋转中心。
然后让我们添加动画。由于圆的宽度和高度与视图框的宽度和高度一致,即 864px,您只需计算一半,在本例中为 432px,这将它放在两个轴的 432px 处。这是动画本身:<animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
解释:你在 from
的两个轴上设置 432 作为标志的动画旋转中心,稳定 -5 度和 5 度与 [=14 相同的旋转中心=],设置一个 duration
秒和 repeatCount
你可以建立一个数字来说明重复的次数或无限循环永远。结果是旗帜将在 0.5 秒内在其中心从 -5 度旋转到 5 度,并且会一直旋转下去。
对于另一个标志,只需复制并粘贴相同的动画,但交换旋转度数的值,使第二个标志沿另一个方向旋转。
就是这样,希望你明白。如有任何疑问,请添加评论。