Sign in

Svg path motion animation animatemotion, in ie11 incompatible how to do?

user8555937 edited in Thu, 15 Sep 2022

There is a SVG Sketchpad, as shown in the figure:


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#a1c4fd;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#a1c4fd;stop-opacity:0" />
  <text font-size="14" x="0" y="0" fill="#cd0000">@
    <animateMotion path="M 100 350 q 150 -300 300 0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
  <path d="M 100 350 q 150 -300 300 0" stroke="url(#grad1)" stroke-width="5" fill="none" />

I want to add a particle animation effect to the curve, with a particle (strip, tail) moving along the track from the left end to the right end. For now, let's replace the display with text.

Tried offset path and animatemotion, the effect is good, but ie11 is not compatible. What is the solution?

1 Replies
commented on Thu, 15 Sep 2022

Incompatible, no alternative. We can only abandon SVG and adopt the flying line effect of ecarts