CODEWITHSUNDEEP
csssvgsafaricss-animations
llin
llin

Reputation: 38

SVG CSS3 animation is not showing on Safari

The following SVG code working in Chrome, but it does not work in Safari. I can't figure out what is the problem. Can you help me out?

I have already add -wekbit-animation and -webkit-frames. Supposedly, Safari should recognise these 2 tags.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    preserveAspectRatio="none" 
    x="0px" y="0px" 
    width="2048px" height="1536px" 
    viewBox="0 0 2048 1536" xml:space="preserve">
    <defs>
      <path id="Layer_green_2_0_1_STROKES" stroke="#2C9842" 
            stroke-width="3.5" stroke-linejoin="round" 
            stroke-linecap="round" fill="#FFFFFF" 
            d="M 397.55 799.35 L 618.95 775.525 826.45 768.95 
              1027.1 693.3 1254.55 684.2" class="path"></path>
    </defs> 
    <g transform="matrix( 1, 0, 0, 1, 0,0) "> 
      <use xlink:href="#Layer_green_2_0_1_STROKES"></use>
    </g>
    <style>
      .path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 5s linear alternate infinite;
      }

      @keyframes dash {
       from {
          stroke-dashoffset: 1000;
       }
       to {
         stroke-dashoffset: 0;
       }
     }
     @-webkit-keyframes dash {
      from {
        stroke-dashoffset: 1000;
      }
      to {
        stroke-dashoffset: 0;
      }
     }

    </style>
    </svg>

Upvotes: 0

Views: 1539

Answers (1)

llin
llin

Reputation: 38

remove <defs> tag, it will show in safari

Upvotes: 1

Related Questions