0

The animation I created in After Effects was a circle slowly morphed into a square, I just adjusted the path property to create the effect. I exported it as SVG with Bodymovin plugin. The animation works fine on Windows and Android, but it does not work on iOS browsers (Safari/Chrome).

I am frustrated and greatly appreciate if anyone can help. Thank you.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="200" height="200" viewBox="0 0 200 200" style="width:100%;height:100%">
  <defs>
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_1_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.4722222;0.4722236;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z " to="M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z " keyTimes="0;0.4722222;1" values="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z ;M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z ;M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z " keySplines="0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_M" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.4722222;0.4722222;1" values="1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate attributeType="XML" attributeName="opacity" dur="3s" from="0" to="1" xlink:href="#time_group" />
  </defs>
  <g id="_R_G">
    <g id="_R_G_L_1_G_M">
      <g id="_R_G_L_1_G" transform=" translate(100, 100) translate(-53.25, -53.25)">
        <path id="_R_G_L_1_G_D_0_P_0" fill="#fb9588" fill-opacity="1" fill-rule="nonzero" d=" M0.25 106.25 C0.25,106.25 106.25,106.25 106.25,106.25 C106.25,106.25 106.25,0.25 106.25,0.25 C106.25,0.25 0.25,0.25 0.25,0.25 C0.25,0.25 0.25,106.25 0.25,106.25z " />
      </g>
    </g>
    <g id="_R_G_L_0_G_M">
      <g id="_R_G_L_0_G" transform=" translate(100, 100) translate(-53.25, -48.75)">
        <path id="_R_G_L_0_G_D_0_P_0" fill="#834d4d" fill-opacity="1" fill-rule="nonzero" d=" M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z " />
      </g>
    </g>
  </g>
  <g id="time_group" />
</svg>

Hope the animation will show on iOS browsers.

enxaneta
  • 31,608
  • 5
  • 29
  • 42
tricia
  • 1
  • 1
  • This is just an observation: I see that the animations have both `from to` and `values` attributes. You either need the `values` or the `from to` pair of attributes. Also i see that the `values` attribute has 4 values as it should be since you have 3 `keySplines`. Please try deleting the `from`and `to` attributes – enxaneta Feb 24 '23 at 21:00
  • Dear @enxaneta, Thank you for your reply. I have deleted the from and to attributes. But the morphing animation still does not work on iOS browers. – tricia Feb 25 '23 at 03:14
  • Working fine in Safari Technology Preview 171. Above Example: https://jsfiddle.net/omptsr8k/show – Ahmad Saleem Jun 02 '23 at 15:37

1 Answers1

0

Move your <animate> elements from the <defs> section to the SVG root.

Apparently, webkit can't apply them since the referenced geometry elements are not yet defined.

Alternative: Move your <defs> to the end of the SVG root.

However, I dont' recommend this, especially if you need to use your animation in some native app environments like flutter has reportedly had issues with <defs> in the svg "footer".

svg {
  width: 50%
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 200">
  <defs>
 
  </defs>
  <g id="_R_G">
    <g id="_R_G_L_1_G_M">
      <g id="_R_G_L_1_G" transform=" translate(100, 100) translate(-53.25, -53.25)">
        <path id="_R_G_L_1_G_D_0_P_0" fill="#fb9588" fill-opacity="1" fill-rule="nonzero" d=" M0.25 106.25 C0.25,106.25 106.25,106.25 106.25,106.25 C106.25,106.25 106.25,0.25 106.25,0.25 C106.25,0.25 0.25,0.25 0.25,0.25 C0.25,0.25 0.25,106.25 0.25,106.25z " />
      </g>
    </g>
    <g id="_R_G_L_0_G_M">
      <g id="_R_G_L_0_G" transform=" translate(100, 100) translate(-53.25, -48.75)">
        <path id="_R_G_L_0_G_D_0_P_0" fill="#834d4d" fill-opacity="1" fill-rule="nonzero" d=" M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z " />
      </g>
    </g>
  </g>
  <g id="time_group" />
  
  
   <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_1_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.4722222;0.4722236;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z " to="M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z " keyTimes="0;0.4722222;1" values="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z ;M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z ;M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z " keySplines="0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_M" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.4722222;0.4722222;1" values="1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate attributeType="XML" attributeName="opacity" dur="3s" from="0" to="1" xlink:href="#time_group" />
  
  
</svg>
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34