Question

我一直在挠头，努力为svg符号制作动画，我想从它在画布上的位置开始旋转和缩放。这些符号都以画布(0, 0)作为原点或其他位置，而不是它们各自的中心。

基本上，我希望一个<use>的实例来回旋转，另一个<use>进行缩放，而另一个<use>进行旋转和缩放这是位置。最终，我将拥有大约20个<use>，它们的位置/颜色/旋转度/比例与同一<symbol>相同。

我绝对不想使用JavaScript或外部资源，只是一小段内联？ svg代码。

您可能会在代码中看到，我很困惑，我对编码还是很陌生。

尝试使用viewBox，转换，翻译代码的错误部分失败。

  <?xml version="1.0" encoding="UTF-8"?>
    <!-- Creator: Made in the Moon -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
    <style type="text/css">
    <![CDATA[

    .fily {fill:#FFDA03}
    .filb {fill:#224D8F}
    .filp {fill:#3F2A56}

    .yrot {transform-origin: 15% 11%;}

    .sp {animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite; transform-origin: center; }
    @keyframes sp {
    0%{transform: scale(0.9);}
    50%{transform: scale(1.3);}
    100%{transform: scale(0.9);}
    }

    .ro {animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
    @keyframes ro {
    0%{transform: rotate(0deg); }
    50%{transform: rotate(90deg); }
    100%{transform: rotate(0deg); }
    }

    .rotateandscale
    {animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
    @keyframes rotateandscale {
    0%{transform: rotate(0deg) scale(0.9);}
    50%{transform: rotate(20deg) scale(1.3);}
    100%{transform: rotate(0deg) scale(0.9);}
    }

    ]]></style>
    <symbol id="grow" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <path d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
    </symbol></defs>

    <use id="p-grow" viewBox="0 0 160 160" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>

    <use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>

    <use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>

    </svg>

<use>的每个实例应分别缩放并从画布上该位置的中心开始旋转。

Answer 1

如果需要围绕中心变换形状，则必须将transform-origin的值设置为该中心。我希望这就是你的要求。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
<style type="text/css">
<![CDATA[

.fily {fill:#FFDA03}
.filb {fill:#224D8F}
.filp {fill:#3F2A56}

/*.yrot {transform-origin: 15% 11%;}*/

use{}

.sp {
transform-origin: 300px 740px;
animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite; transform-origin: center; }
@keyframes sp {
0%{transform: scale(0.9);}
50%{transform: scale(1.3);}
100%{transform: scale(0.9);}
}

.ro {
  transform-origin: 145px 145px;  
  animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
@keyframes ro {
0%{transform: rotate(0deg); }
50%{transform: rotate(90deg); }
100%{transform: rotate(0deg); }
}

  .rotateandscale{
  transform-origin: 800px 350px;
animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
@keyframes rotateandscale {
0%{transform:scale(0.9) rotate(0deg) }
50%{transform:scale(1.3) rotate(90deg);}
100%{transform: scale(0.9) rotate(0deg);}
}

]]></style>
<symbol id="grow" viewBox="186.8 121 627 760" >
<path id="kk" d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
</symbol></defs>

<use id="p_grow" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>

<use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>

<use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>

</svg>

Answer 2

太神奇了，非常感谢，非常容易了解现在的情况。感谢您抽出宝贵的时间来解释这一点：）

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[

.fily{fill:#FFDA03; transform-origin: 800px 350px;}
.filb{fill:#224D8F; transform-origin: 300px 740px;}
.filp{fill:#3F2A56; transform-origin: 145px 145px;}

.sp{animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite;}
@keyframes sp {
0%{transform: scale(0.9);}
50%{transform: scale(1.3);}
100%{transform: scale(0.9);}}

.ro{animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite;}
@keyframes ro{
50%{transform: rotate(90deg);}}

.rotateandscale{animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite;}
@keyframes rotateandscale{
0%{transform:scale(0.9) rotate(0deg)}
50%{transform:scale(1.3) rotate(90deg);}
100%{transform: scale(0.9) rotate(0deg);}}

]]></style>
<symbol id="grow" viewBox="186.8 121 627 760" >
<path id="kk" d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
</symbol></defs>

<use id="p_grow" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>

<use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>

<use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>

</svg>

SVG <animation> <use>应该单独缩放并从画布上该位置的中心旋转

2 个答案: