Skip to main content

Forums

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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!

    #172328
    Paulie_D
    Moderator

    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.

    #172334
    bearhead
    Participant

    Here’s a codepen:

    A Pen by Captain Anonymous on CodePen.

    License.

    #172380
    Paulie_D
    Moderator

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

    EDIT – Codepen Deleted.

    #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…)

    #172419
    Paulie_D
    Moderator

    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.

    #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;
      }
    }
    
    #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…

    #172429
    Paulie_D
    Moderator

    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

    #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 :)

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star