CODEWITHSUNDEEP
svgsafarisvg-animate
pbspry
pbspry

Reputation: 117

SVG transform animations won't work in Safari

I've got a simple animated SVG that works great in Chrome/Firefox but it doesn't animate at all in Safari. I understand this is due to SVG 1.1 vs. 2.0 (Safari doesn't yet support 2.0) , and that there are ways to make such animations work (simple scale plus rotate on three separate elements, with different timing) within SVG 1.1 but everything I've tried just fails completely.

Is there any way to get the following SVG 2.0 code to work properly in an SVG 1.1 environment like Safari or do I need to completely recode this in CSS?

Thank you!

body{
  background:#000
}
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="1.691 0 12.029 10.111" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0 ; 1" dur="1s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <symbol id="star2" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform="scale(0 0)" transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0 ; 1" dur="1s" begin="1.5s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <use transform="matrix(1, 0, 0, 1, 2.0000000298023224, 1.0000000149011612)" xlink:href="#star1">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 8.00000011920929, 2.0000000298023224)" xlink:href="#star1">
    <animate attributeName="visibility" values="hidden;visible;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 10.000000149011612, 6.000000089406967)" xlink:href="#star2">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite"/>
  </use>
</svg>

Upvotes: 0

Views: 866

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17316

safari/webkit tends to be less forgiving towards minor syntax errors – or lagging behind standards

I could reproduce/fix your animation by removing leading white space in the keytimes attribute values as found in:

Update: As commented by Robert Longson:
Per SMIL 3.0 specification additional white space should be ignored – so it should to be considered a webkit bug.

<animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" repeatCount="indefinite"/>


body{
  background:#ccc
}
<svg viewBox="1.691 0 12.029 10.111" xmlns="http://www.w3.org/2000/svg" >
  <symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0; .4; 1" dur="2s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0; 1" dur="1s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <use transform="matrix(1, 0, 0, 1, 2.0000000298023224, 1.0000000149011612)" href="#star1">
  </use>
</svg>

(SVG) Spec versions are seldom helpful

SVG 2 is still "in flux" (same applies to something like CSS 3) – besides, these spec versions usually don't help to fix any browser specific rendering issues.

Modern browsers (Firefox, blink/chromium, webkit) usually support many features introduced by the SVG 2 spec.

However, there is no standard how to implement these format recommendations.
Some browsers may implement concepts sooner – others may wait until the specs are perfectly clear.

Debugging recommendations for svg animations

  • Reduce your svg to a single element and
  • test each animation to find the one that doesn't work
  • inspect all attribute values closely – do values and keyTimes match?
  • any "non-ideal" whitespace?
  • "SVG Presentation Attributes" defined via CSS – still not supported by browser XYZ

Upvotes: 1

Related Questions