svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
10.95k stars 1.07k forks source link

Animate with "dy" attributeName just cannot work #1271

Closed MagnusLeona closed 2 years ago

MagnusLeona commented 2 years ago

Hi, I am fresh to SVG animation, and I faced some problem with the Dy attribute which I wish to be solved; I wanna to make a String bouncing, one character each time. So I used the code below:

<svg width="900" height="400" xmlns="http://www.w3.org/2000/svg">
        <symbol id="text">
          <text x="10%" y="40%" class="text">
            <!-- <animate
              attributeName="dy"
              from="0 0 0 0 0"
              to="0 0 0 0 30%"
              dur="10s"
            ></animate> -->
            Todos
          </text>
        </symbol>

        <g>
          <use xlink:href="#text" class="t-text">
            <animate
              attributeName="dx"
              from="0 0 0 0 20%"
              to="0 0 0 0 0"
              dur="3s"
              repeatCount="indefinite"
            ></animate>
            <!-- <animate
              attributeName="dy"
              values="0;20%;0;0;0"
              dur="10s"
            ></animate> -->
          </use>
        </g>
      </svg>

But it just cannot work, and i cannot figure out the reason. Wish for your guide, thanks really~

Fuzzyma commented 2 years ago

Your question is not related to svg.js. Please ask your question on stackoverflow