0

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>
Alex Ljamin
  • 737
  • 8
  • 31
llin
  • 38
  • 6
  • How much more of this SVG is there? This isn't the complete file. – zero298 May 07 '18 at 14:38
  • apology, i just updated the complete SVG code – llin May 07 '18 at 14:45
  • One other thing, is this SVG file linked to from a `` or is it embeded into the HTML directly? – zero298 May 07 '18 at 14:52
  • I just used browser directly opened this SVG file, but eventually will embedded into HTML. Thanks. – llin May 07 '18 at 14:57
  • Possible duplicate of [:hover not working on svg when svg is in external file](https://stackoverflow.com/questions/40851166/hover-not-working-on-svg-when-svg-is-in-external-file) – zero298 May 07 '18 at 15:15
  • Take a look at the question I just linked. I believe the issue is that you are trying to use animations from outside of an `` tag. You should try doing this directly within an embedded `` tag rather than linking. – zero298 May 07 '18 at 15:16
  • thank you, but the animation is working on chrome, not on safari. I dont think it's quite related with the question you linked, and I am not calling animation from outside tag... – llin May 07 '18 at 15:32
  • I figured it out I have to remove tag to show in safari.... – llin May 07 '18 at 15:35

1 Answers1

1

remove <defs> tag, it will show in safari

llin
  • 38
  • 6