CODEWITHSUNDEEP
htmlsvgsafarismil
Megaroeny
Megaroeny

Reputation: 827

Simple SVG SMIL not showing in Safari

This codepen is working in every browser, except Safari. It's not complicated, but I am pretty new to SVG and SMIL, so I might be missing something that isn't supported?

http://codepen.io/jaminroe/pen/rVoPRp

Simplified version, with only 2 shapes:

<svg height="100px" width="100px" viewBox="0 0 50 50" >
  <path fill="#4E3BC1" >
    <animate 
             attributeName="d" 
             dur="1s" 
             repeatCount="indefinite" 
             keyTimes="0;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1;" 
             
             values="M 0 50
                     c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
                     Z;

                     m 41 50
                     c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
                     Z;"
             />
    <animate 
             attributeName="fill" 
             dur="1s" 
             repeatCount="indefinite" 
             keyTimes="0;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1;" 
             
             values="#1eb287;
                     #1ca69e;"
             />
  </path>
</svg>

Thank you!

Upvotes: 1

Views: 638

Answers (2)

gilad905
gilad905

Reputation: 3177

Another issue with Safari I found is when using <animate>, the values attribute can end with trailing semicolons but must not end with a trailing newline character, i.e the attribute value must end either with path data or a semicolon, right before the closing parentheses.

VALID:

<animate values="
    M 332,520   h 20   a 10,10,0,0,1,0,20   H 332   A 10,10,0,0,1,332,520   Z;">
</animate>

VALID:

<animate values="
    M 332,520   h 20   a 10,10,0,0,1,0,20   H 332   A 10,10,0,0,1,332,520   Z">
</animate>

INVALID:

<animate values="
    M 332,520   h 20   a 10,10,0,0,1,0,20   H 332   A 10,10,0,0,1,332,520   Z;
"></animate>

(the examples are incomplete on purpose, I removed all other attributes and paths to declutter them)

Upvotes: 2

Kevin Hufnagl
Kevin Hufnagl

Reputation: 386

Remove the semicolon at the end in each of the keySplines attributes.

I am new to this as well, and just experienced the same problem. As you probably know, keyTimes needs to have exactly one more value than keySplines (In your case 2 keyTimes and 1 keySpline). The semicolon at the end of your keySplines attribute probably makes Safari assume, that there is a second value following, meaning you'd now have 2 keyTimes values and 2 keySplines values. This breaks the entire animation and nothing shows up.

Here is your snippet with the semicolons removed, working in Safari.

<svg height="100px" width="100px" viewBox="0 0 50 50" >
  <path fill="#4E3BC1" >
    <animate 
             attributeName="d" 
             dur="1s" 
             repeatCount="indefinite" 
             keyTimes="0;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1" 
             
             values="M 0 50
                     c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
                     Z;

                     m 41 50
                     c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
                     Z;"
             />
    <animate 
             attributeName="fill" 
             dur="1s" 
             repeatCount="indefinite" 
             keyTimes="0;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1" 
             
             values="#1eb287;
                     #1ca69e;"
             />
  </path>
</svg>

Upvotes: 7

Related Questions