Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Trouble with animated svg in Chrome

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 10, 2014 at 1:50 pm #172320
    bearhead
    Participant

    I’m trying to create an animated svg for the project I’m currently working on.

    What I’m trying to do is have the client’s logo animate in as outlines as seen here on css tricks:
    https://css-tricks.com/svg-line-animation-works/

    Here is a live example of what I have
    http://www.aeieng.com/images/svg_test.html

    It works as planned in firefox, but the animation doesn’t run in Chrome. Could anyone offer any help as to why it doesn’t work in Chrome and how I can fix it?

    Thanks!

    June 10, 2014 at 2:18 pm #172328
    Paulie_D
    Member

    It would be easier if you made the demo in Codepen.io where we can see all the code rather than trying to rummage around inspecting the code using developer tools.

    June 10, 2014 at 3:02 pm #172334
    bearhead
    Participant

    Here’s a codepen:

    A Pen by Captain Anonymous on CodePen.

    License.

    June 11, 2014 at 4:09 am #172380
    Paulie_D
    Member

    I’ve played a little and I think the numbers still need some tweaking but

    EDIT – Codepen Deleted.

    June 11, 2014 at 7:43 am #172416
    bearhead
    Participant

    hmm… even though the codepen you posted works in chrome, I still can’t get the animation to play when I put it into an html file like so:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

body {
  //background-color: red;
}

.path {
  stroke-dasharray: 99%;
  stroke-dashoffset: 2500;
  animation: dash 16s linear forwards infinite;
}

.path stroke {
  stroke-width:15px;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

<title>Untitled Document</title>
</head>

<body>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="375.086px" height="103.605px" viewBox="0 0 375.086 103.605" enable-background="new 0 0 375.086 103.605"
     xml:space="preserve">
     

<polygon class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="81.573,82.564 81.562,18.029 61.719,18.026 17.484,82.493 
    37.361,82.501 65.108,42.064 65.108,66.055 65.099,66.056 54.72,66.056 54.748,82.564 "/>
<rect class="path" x="90.533" y="18.057" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="39.876" height="16.452"/>
<rect class="path" x="90.544" y="42.033" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="39.876" height="16.454"/>
<rect class="path" x="90.539" y="66.135" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="39.876" height="16.454"/>
<rect class="path" x="139.599" y="18.062" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="16.452" height="64.492"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M185.093,24.78h0.083l3.709,11.823h-7.627L185.093,24.78z
     M179.591,41.779h11.046l1.916,6.193h6.795l-10.545-29.938h-7.211l-10.67,29.938h6.585L179.591,41.779z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M207.252,47.972h-5.813V29.966h-3.209V25.79h3.209v-1.787
    c0-4.585,2.49-6.338,6.479-6.338c1.709,0,2.502,0.042,3.002,0.083v4.717h-1.625c-2.002,0-2.043,0.624-2.043,2.452v0.873h3.793v4.176
    h-3.793V47.972L207.252,47.972z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M219.129,47.972h-5.813V29.966h-3.209V25.79h3.209v-1.787
    c0-4.585,2.49-6.338,6.479-6.338c1.709,0,2.5,0.042,3,0.083v4.717h-1.625c-2,0-2.041,0.624-2.041,2.452v0.873h3.791v4.176h-3.791
    V47.972L219.129,47.972z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M230.672,25.785v22.188h-5.813V25.785H230.672z M230.672,23.154
    h-5.813v-5.426h5.813V23.154z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M240.174,47.972h-5.813V18.035h5.813V47.972z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M249.676,25.785v22.188h-5.813V25.785H249.676z M249.676,23.154
    h-5.813v-5.426h5.813V23.154z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M265.493,40.02c0,2.672-2.634,4.333-5.224,4.333
    c-1.127,0-2.715-0.623-2.715-2.657c0-2.408,1.795-2.948,3.967-3.321c2.424-0.374,3.386-0.748,3.972-1.204V40.02z M271.18,31.652
    c0-5.464-5.688-6.424-8.82-6.424c-4.555,0-9.248,0.96-9.912,7.757h5.607c0.168-1.291,0.67-3.081,3.594-3.081
    c1.504,0,3.845,0.125,3.845,2.582c0,1.249-1.13,1.624-2.05,1.748l-5.264,0.791c-3.699,0.542-6.438,2.748-6.438,7.077
    c0,4.548,3.404,6.427,6.73,6.427c3.969,0,5.85-1.837,7.186-3.215c0.125,1.284,0.207,1.617,0.539,2.659h6.273v-0.875
    c-0.709-0.25-1.293-0.833-1.293-3.455L271.18,31.652L271.18,31.652z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M281.038,25.791h3.627v4.176h-3.627V42
    c0,1.291,0.043,1.791,2.418,1.791c0.375,0,0.791-0.042,1.209-0.083v4.425c-0.918,0.042-1.834,0.083-2.752,0.083h-1
    c-5.022,0-5.938-1.92-5.938-4.8v-13.45h-3V25.79h3v-6h5.813v6.001H281.038z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M290.936,34.666c0.334-2.896,1.795-4.637,4.551-4.637
    c1.882,0,4.179,1.077,4.513,4.637H290.936z M299.747,41.45c-0.459,1.575-2.129,2.403-3.758,2.403c-4.72,0-5.054-3.729-5.222-5.389
    h15.229v-1.044c0-10.105-6.041-12.192-10.427-12.192c-9.721,0-10.637,8.525-10.637,11.19c0,9.104,4.791,12.109,11.055,12.109
    c3.8,0,8.218-1.753,9.759-7.079L299.747,41.45L299.747,41.45z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M313.355,37.045c0-3.485,1.248-6.767,4.949-6.767
    c3.988,0,4.986,3.57,4.986,7.099c0,3.279-1.455,6.353-5.154,6.353C314.396,43.728,313.355,39.66,313.355,37.045z M328.855,18.035
    h-5.813v10.658h-0.084c-0.914-1.419-2.66-3.465-6.401-3.465c-4.867,0-9.201,3.757-9.201,11.4c0,6.062,2.75,11.898,9.326,11.898
    c2.411,0,4.989-0.876,6.401-3.381h0.084v2.825h5.688V18.035z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M193.54,57.952h-15.88v6.262h14.584v5.303H177.66v7.762h16.586
    v5.301h-22.711V52.651h22.002v5.301H193.54z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M216.811,82.583H211V69.135c0-1.622-0.084-4.37-3.793-4.37
    c-2.584,0-4.582,1.749-4.582,5.079v12.738h-5.813V60.396h5.563v3.284h0.082c0.793-1.337,2.459-3.842,6.666-3.842
    c4.322,0,7.688,2.546,7.688,7.426V82.583L216.811,82.583z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M224.918,71.597c0-5.129,2.422-6.708,4.596-6.708
    c3.256,0,5.01,2.908,5.01,6.483c0,3.034-1.002,6.401-4.969,6.401C226.086,77.776,224.918,74.436,224.918,71.597z M234.73,60.396
    v3.325h-0.082c-0.709-1.463-2.381-3.884-6.516-3.884c-4.883,0-9.215,3.759-9.215,11.411c0,7.737,4.207,11.452,9.549,11.452
    c3.51,0,4.971-1.628,5.932-3.339l0.084,0.083v2.671c0,3.592-1.504,5.096-4.637,5.096c-3.383,0-3.844-1.128-4.094-2.256h-6.334
    c0.25,4.719,5.082,6.684,9.678,6.684c10.906,0,11.197-6.391,11.197-10.231V60.396H234.73z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M249.297,60.396v22.188h-5.813V60.396H249.297z M249.297,57.765
    h-5.813v-5.428h5.813V57.765z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M272.863,82.583h-5.813V69.135c0-1.622-0.084-4.37-3.793-4.37
    c-2.582,0-4.582,1.749-4.582,5.079v12.738h-5.813V60.396h5.563v3.284h0.084c0.791-1.337,2.457-3.842,6.666-3.842
    c4.324,0,7.688,2.546,7.688,7.426V82.583z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M280.639,69.276c0.334-2.898,1.795-4.637,4.551-4.637
    c1.881,0,4.179,1.074,4.513,4.637H280.639z M289.45,76.061c-0.459,1.573-2.13,2.401-3.759,2.401c-4.719,0-5.053-3.729-5.221-5.387
    H295.7v-1.044c0-10.106-6.043-12.194-10.429-12.194c-9.719,0-10.635,8.527-10.635,11.192c0,9.103,4.791,12.109,11.053,12.109
    c3.802,0,8.218-1.754,9.761-7.079L289.45,76.061L289.45,76.061z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M302.85,69.276c0.334-2.898,1.797-4.637,4.553-4.637
    c1.88,0,4.177,1.074,4.511,4.637H302.85z M311.663,76.061c-0.459,1.573-2.129,2.401-3.759,2.401c-4.721,0-5.055-3.729-5.221-5.387
    h15.229v-1.044c0-10.106-6.041-12.194-10.428-12.194c-9.719,0-10.637,8.527-10.637,11.192c0,9.103,4.793,12.109,11.055,12.109
    c3.801,0,8.219-1.754,9.76-7.079L311.663,76.061L311.663,76.061z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M319.896,60.396h5.563v3.821h0.084
    c1.207-2.232,2.541-4.386,6.084-4.386c0.375,0,1,0.042,1.125,0.083v5.876c-0.5-0.084-1.125-0.084-1.668-0.084
    c-4.543,0-5.375,2.84-5.375,5.307v11.568h-5.813V60.396L319.896,60.396z"/>
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M346.795,67.177c-0.25-1.412-1-2.91-3.908-2.91
    c-3.174,0-3.592,1.207-3.592,2.164c0,3.492,13.875,0.955,13.875,9.099c0,6.443-6.23,7.612-9.697,7.612
    c-5.053,0-10.512-1.756-10.678-7.653h6c0,1.862,1.168,3.228,4.844,3.228c3.008,0,3.719-1.446,3.719-2.274
    c0-3.688-13.75-0.911-13.75-9.18c0-3.244,2.033-7.421,8.938-7.421c4.332,0,9.479,1.085,9.938,7.339L346.795,67.177L346.795,67.177z"
    />
</svg>
</body>
</html>

    I also tried including the svg as <object> and as with the same results (animation only works in firefox)

    Is there an issue with my doctype or <html> or something of that nature? or does chrome just not like svg animated through css? (I’ve only ever seen it working in chrome through codepen…)

    June 11, 2014 at 7:56 am #172419
    Paulie_D
    Member

    Hmmm..

    I’d try just <!DOCTYPE html> without any of that additional cruft first.

    …and I’m not sure you need xmlns="http://www.w3.org/1999/xhtml" either.

    June 11, 2014 at 8:28 am #172426
    paulob
    Participant

    Don’t forget the vendor pre-fixes:

    .path {
  stroke-dasharray: 99%;
  stroke-dashoffset: 2500;
  -webkit-animation: dash 16s linear forwards infinite;
  -moz-animation: dash 16s linear forwards infinite;
    animation: dash 16s linear forwards infinite;
}

.path stroke {
  stroke-width:15px;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
    June 11, 2014 at 8:35 am #172428
    bearhead
    Participant

    edit: I forgot to add the vendor prefixes to .path. after I did that I
    added a fill color change to the animation and interestingly that works in both chrome and firefox, but chrome still doesn’t play the stroke animation…

    June 11, 2014 at 8:40 am #172429
    Paulie_D
    Member

    Only other thing I can think of is that Codepen uses Autoprefixer…so it could be a vendor -prefix issue.

    Could be…when I turn it off…the animation stops

    June 11, 2014 at 8:50 am #172431
    bearhead
    Participant

    oh, snap, just figured it out, apparently chrome didn’t like:

    to {
    stroke-dashoffset: 0;
  }

    so I changed it to:

    100% {
    stroke-dashoffset: 0;
  }

    and its working!

    Thanks for your help :)

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.