Svg + CSS3 Animation Not Working with Link Markup

SVG + css3 animation not working with link markup

This can be done using pure CSS3 and HTML5. The trick is to embed the link inside the svg by using the xlink element with the target set to parent:

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="../index.html" target="_parent">
        <rect id="one" width="63.9" height="63.9" class="style3"/>
        <ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
    </a>
</svg>

The two important bits:

1. The xmlns:xlink="http://www.w3.org/1999/xlink" namespace.

2. The actual link: <a xlink:href="../index.html" target="_parent"> </a>

Note: This method has only been tested using the <object> method of embedding the SVG.

CSS SVG animation not working

Yeah it does look like because it's nested in a symbol, the logoAni was not getting applied. I stripped it out and cleaned up the SVG and tweaked the styles so you can see the animation. I think the other big thing that was missing was that you need a stroke property to be set so I went ahead and set that directly in the SVG.

EDIT: Okay so looking at your comment I wanted to address specifically how you could get from my original to what you wanted.

1) In terms of the size, this is based on the viewbox for SVGs. It would be good to read on that. I guess what they did in the example is they applied the viewBox to the symbol and then used that but I simply added it to the SVG. For now though I made it so you can just edit the width and height in the .logo class in the CSS.

2) You said you want it to be nothing and then fill in with white. So two things with this is that the inital whiteness is because the fill is set to #fff. I went ahead and added it as a CSS attribute so you can play around. If you set it to transparent you get some of what you want but the path apparently doesn't incorporate the inner part of the person's legs so it doesn't get exactly what you want. You probably will need to define the path yourself.

3) I went ahead and reverted some of the things so it uses the values your example uses but also added some changes. Specifically for animations, you need to use forwards so that it knows to stay in place and keep the animation in the final state.

Hope that helps!

body {

  background: green;

}

.logo {

  width: 200px;

  height: 200px;

}

.logoAni {

  fill: white;

  stroke-dasharray: 2193;

  stroke-dashoffset: 2193;

  animation: dash 5s ease-in forwards;

}

@keyframes dash {

  from {

    stroke-dashoffset: 2193;

  }

  to {

    stroke-dashoffset: 0;

  }

}

<svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51.674 51.674">

<g>

    <g class="container">

     <path class="logoAni" stroke="#fff" d="m51.378,42.158c-0.974,-1.539 -2.923,-2.291 -4.521,-2.977c-0.736,-0.314 -1.525,-0.547 -2.233,-0.921c-0.795,-0.42 -1.371,-1.366 -1.908,-2.048c-0.94,-1.194 -1.84,-2.42 -2.884,-3.529c-0.667,-0.71 -1.18,-1.443 -1.612,-2.32c-0.748,-1.519 -1.233,-3.172 -1.642,-4.811c-0.147,-0.596 -0.28,-1.196 -0.397,-1.799c-0.031,-0.164 -0.062,-0.329 -0.09,-0.495c-0.002,-0.021 -0.004,-0.031 -0.006,-0.041c-0.031,-0.272 -0.049,-0.547 -0.08,-0.819c-0.203,-1.749 -0.703,-3.386 -1.85,-4.749c-1.055,-1.254 -2.809,-2.561 -4.548,-2.274c-0.067,0.011 -0.12,0.036 -0.163,0.067c-0.264,0.122 -0.492,0.349 -0.702,0.527c-0.417,0.355 -0.843,0.69 -1.313,0.973c-1.519,0.913 -3.25,0.946 -4.907,0.398c-0.606,-0.2 -1.179,-0.484 -1.735,-0.795c-0.317,-0.177 -0.622,-0.373 -0.925,-0.573c-0.217,-0.144 -0.394,-0.304 -0.663,-0.32c-0.918,-0.054 -1.909,0.589 -2.591,1.13c-2.092,1.66 -2.214,4.428 -2.585,6.855c-0.218,1.425 -0.428,2.853 -0.801,4.247c-0.375,1.404 -1.021,2.652 -1.816,3.861c-0.82,1.248 -1.776,2.401 -2.735,3.545c-0.456,0.543 -0.916,1.084 -1.37,1.63c-0.467,0.562 -0.888,1.25 -1.501,1.661c-0.3,0.201 -0.703,0.267 -1.046,0.365c-0.368,0.105 -0.737,0.209 -1.106,0.31c-0.606,0.166 -1.229,0.289 -1.806,0.544c-0.624,0.275 -1.839,0.922 -1.842,1.736c-0.002,0.594 0.518,1.084 1.004,1.338c0.809,0.423 1.794,0.449 2.706,0.402c-0.045,0.933 0.096,1.848 0.572,2.674c0.537,0.932 1.464,1.592 2.387,2.102c2.497,1.381 5.427,1.255 8.183,1.456c1.549,0.112 3.08,0.338 4.634,0.407c1.62,0.072 3.243,0.062 4.862,0.045c3.272,-0.036 6.542,-0.02 9.812,-0.018c1.774,0 3.554,-0.002 5.328,-0.005c0.921,0 1.842,0 2.765,0c0.768,0.003 1.534,0.038 2.293,-0.118c1.191,-0.25 2.166,-1.065 2.791,-2.086c0.479,-0.789 0.605,-1.646 0.672,-2.521c0.168,-0.006 0.314,-0.092 0.344,-0.288c0.029,-0.209 0.033,-0.404 0.023,-0.591c0.715,0.214 1.487,0.303 2.18,0.016c0.416,-0.173 0.728,-0.477 0.953,-0.865c0.293,-0.505 0.164,-0.859 -0.131,-1.326zm-15.293,-18.941c-0.004,-0.022 -0.003,-0.016 0,0l0,0zm14.055,20.438c-0.642,0.219 -1.387,-0.004 -2.021,-0.25c-0.749,-1.441 -2.967,-1.97 -4.607,-2.102c-0.01,-0.008 -0.019,-0.021 -0.028,-0.027c-5.75,-3.775 -10.404,-9.9 -10.927,-16.93c-0.017,-0.203 -0.152,-0.323 -0.309,-0.365c-0.167,-0.06 -0.351,-0.023 -0.436,0.144c-0.021,0.033 -0.035,0.071 -0.045,0.114c0,0 0,0 0,0.001c-0.711,4.433 -0.541,9.032 -0.266,13.499c0.021,0.346 0,0.737 0.078,1.076c0.115,0.493 0.375,0.947 0.695,1.336c0.309,0.375 0.695,0.76 1.166,0.92c0.63,0.213 1.367,0.235 2.025,0.322c1.535,0.203 3.08,0.344 4.623,0.482c0.713,0.062 1.428,0.127 2.142,0.191c0.077,0 0.423,0 0.423,0s-0.346,0 -0.423,0c0.059,0.004 0.116,0.01 0.175,0.016c0.238,0.021 0.604,0.119 0.859,0.052c1.106,0.146 3.392,0.58 4.039,1.724c-0.119,1.249 -0.047,2.467 -0.731,3.588c-0.616,1.008 -1.675,1.602 -2.841,1.689c-0.75,0.057 -1.52,0.007 -2.271,0.007c-0.854,0 -1.711,0 -2.564,0.001c-1.645,0.001 -3.289,0.003 -4.934,0.002c-3.271,-0.002 -6.539,-0.016 -9.809,0.02c-0.745,0.01 -1.49,0.012 -2.234,0.007c-0.874,-0.212 -1.741,-0.565 -2.273,-1.265c-0.411,-0.539 -0.428,-1.265 0.01,-1.791c0.642,-0.773 1.96,-0.955 2.89,-1.103c0.695,-0.11 1.405,-0.175 2.108,-0.19c0.042,0 0.065,-0.022 0.094,-0.041c5.185,0.062 10.786,0.074 11.402,-0.158c1.173,-0.443 -19.553,-1.723 -20.44,0c0,0 2.676,0.062 6.092,0.117c-0.955,0.184 -2.049,0.491 -2.6,1.32c-0.421,0.635 -0.325,1.447 0.099,2.049c0.327,0.463 0.794,0.791 1.315,1.033c-0.442,-0.01 -0.884,-0.014 -1.325,-0.033c-1.544,-0.07 -3.068,-0.3 -4.608,-0.412c-2.466,-0.179 -5.006,-0.088 -7.295,-1.172c-0.904,-0.428 -1.795,-1.033 -2.354,-1.878c-0.345,-0.52 -0.483,-1.108 -0.522,-1.71c0.027,-0.053 0.045,-0.113 0.042,-0.189c-0.044,-1.219 0.771,-2.021 1.837,-2.471c0.419,-0.178 0.861,-0.3 1.305,-0.392c0.233,-0.048 0.375,-0.071 0.519,-0.084c2.585,0.001 5.168,0.004 7.753,0.005c1.178,0 2.768,0.102 3.361,-1.156c0.495,-1.051 0.542,-2.365 0.631,-3.511c0.123,-1.581 0.182,-3.169 0.179,-4.755c-0.004,-2.29 -0.015,-4.867 -0.911,-7.015c-0.148,-0.356 -0.64,-0.404 -0.771,0c-1.028,3.149 -2.196,6.277 -3.947,9.105c-1.711,2.766 -4.042,5.053 -6.932,6.562c-0.004,0.002 -0.007,0.004 -0.011,0.006c-0.009,0.005 -0.017,0.01 -0.026,0.015c-0.028,0.015 -0.043,0.035 -0.065,0.054c-1.453,0.287 -2.934,1.043 -3.491,2.355c-0.938,0.066 -2.04,0.105 -2.843,-0.439c-0.161,-0.107 -0.285,-0.283 -0.345,-0.466c-0.067,-0.2 0.776,-0.704 0.942,-0.804c0.442,-0.266 0.886,-0.396 1.381,-0.529c0.801,-0.214 1.601,-0.433 2.396,-0.669c1.32,-0.392 2.076,-1.751 2.918,-2.752c1.831,-2.176 3.852,-4.386 4.983,-7.032c1.084,-2.537 1.303,-5.417 1.7,-8.121c0.162,-1.099 0.404,-2.173 1.001,-3.124c0.575,-0.916 1.482,-1.624 2.502,-1.973c0.502,-0.172 0.56,-0.075 0.994,0.212c0.523,0.347 1.073,0.652 1.641,0.92c0.91,0.429 1.872,0.714 2.875,0.811c1.374,0.132 2.74,-0.255 3.899,-0.986c0.423,-0.267 0.814,-0.583 1.195,-0.906c0.136,-0.115 0.271,-0.232 0.41,-0.344c-0.035,0.027 0.092,-0.065 0.121,-0.084c0.024,-0.017 0.035,-0.024 0.041,-0.03c0.004,0.001 0.006,0.002 0.021,-0.002c0.998,-0.164 2.218,0.565 2.923,1.203c0.679,0.612 1.255,1.299 1.671,2.114c0.748,1.466 0.721,3.113 1.032,4.69c0.341,1.721 0.802,3.428 1.422,5.07c0.347,0.913 0.749,1.812 1.271,2.638c0.607,0.969 1.481,1.738 2.207,2.617c0.699,0.846 1.351,1.727 2.03,2.586c0.427,0.537 0.853,1.127 1.382,1.57c0.439,0.367 0.982,0.564 1.515,0.761c0.534,0.198 1.049,0.419 1.573,0.644c1.271,0.543 2.612,1.144 3.568,2.173c0.104,0.11 0.523,0.567 0.469,0.729c-0.119,0.343 -0.4,0.595 -0.74,0.711zm-17.926,-16.373c1.322,5.668 5.119,10.574 9.832,13.971c-2.352,-0.215 -4.705,-0.398 -7.047,-0.725c-0.512,-0.07 -1.107,-0.072 -1.554,-0.353c-0.437,-0.274 -0.757,-0.759 -0.978,-1.212c-0.151,-0.309 -0.131,-0.682 -0.151,-1.016c-0.027,-0.412 -0.05,-0.824 -0.072,-1.235c-0.165,-3.113 -0.278,-6.3 -0.03,-9.43zm-13.372,-1.533c0.359,1.391 0.428,2.879 0.476,4.289c0.061,1.793 0.008,3.59 -0.105,5.379c-0.072,1.138 -0.161,2.296 -0.436,3.402c-0.108,0.437 -0.28,0.848 -0.728,1.012c-0.68,0.246 -1.495,0.179 -2.204,0.179c-2.206,-0.001 -4.413,-0.003 -6.62,-0.004c2.4,-1.521 4.366,-3.591 5.902,-6.005c1.622,-2.551 2.745,-5.391 3.715,-8.252z"/>

     <path class="logoAni" stroke="#fff" d="m26.606,14.687c2.558,-1.003 4.219,-3.521 4.252,-6.248c0,-0.003 0.002,-0.006 0.002,-0.01c-0.024,-2.223 -1.095,-4.24 -2.897,-5.533c-1.81,-1.299 -4.261,-1.533 -6.316,-0.727c-2.023,0.794 -3.533,2.566 -4.063,4.663c-0.546,2.165 0.094,4.466 1.558,6.122c1.836,2.077 4.904,2.737 7.464,1.733zm-8.184,-7.899c0.604,-2.197 2.506,-3.803 4.716,-4.212c3.596,-0.666 6.884,2.286 6.922,5.853c-0.025,2.308 -1.334,4.352 -3.401,5.369c-2.078,1.023 -4.652,0.617 -6.396,-0.864c-1.768,-1.5 -2.45,-3.93 -1.841,-6.146z"/>

    </g>

</g>

</svg>

Animating a linked svg not working; Working fine when inline

Your problem is that styles defined in the parent document (the stroke-dasharray and stroke-dashoffset rules) don't apply to embedded objects. CSS does not cascade into objects.

You can either add the style rules directly to the object using JavaScript, or you can embed the CSS rules in the external SVG file instead of the parent document.

This question has more details.

SVG css3 transition on fill not working when there is external link

This is actually something to do with the visited state. The reason the other commenters are saying it works is because they haven't been to your pages before. Once they have it will no longer work. I've tried adding visited states in the CSS and it makes no difference.

The easiest solution I've found is to just add a random query string to the url so the page is effectively not visited eg:

<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>

Most sites will ignore a query they don't recognise so that should be ok. Or better would be to remove it with JS on click.

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    var url = $(this).prop('href');
    window.location.href = url.split("?")[0];
});

SVG animation not working as expected

You may consider an easier path for your SVG:

path {

  fill: transparent;

  stroke: #000;

  stroke-dasharray: 212;

  stroke-dashoffset: 212;

  animation: dash 5s linear forwards;

}

@keyframes dash {

  to {

    stroke-dashoffset: 0;

  }

}

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='200'>

  <path stroke-width=0.5 d='M0 16 L0 32 C0 48 0 48 16 48 L48 48 C64 48 64 48 64 32 L64 16 C64 0 64 0 48 0 L16 0 C0 0 0 0 0 16 Z' />

</svg>

SVG infinity animate not working properly

The first precondition to get a fluent movement with stroke-dashoffset animations is to know the length of the path with appropriate precision:

document.querySelector('#loop-normal').getTotalLength() // approx. 1910

1. Leave out the animation of stroke-dasharray. Instead divide the total length fo the path statically into one dash and one gap: stroke-dasharray="200 1710". (Any other proportion will work as long as the sum equals 1910.)
2. Your <animateMotion> is lacking the keyPoints attribute. Set it to "0;1"
3. Defining keySplines has no effect as long as you don't set calcMode="spline". Leave it of.

The rest is a bit of a simplification: define the path only once, and position both the background and animated use in the same SVG; name the correct path length in the stroke-dashoffset animation to ensure smooth movement; remove unused CSS.

.svg-main {

    width: 700px;

    margin: 30px auto;

    position: relative;

}

svg#svga {

    position: absolute;

    top: 0;

    left: auto;

    bottom: auto;

    right: auto;

}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}

.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}

.circ{fill:#000000; }

<div class="svg-main">

<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

  width="300px" height="200px" viewBox="0 0 685 310">

  <g class="st2">

 <path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2

 c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8

 C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>

  </g>

 <use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">

  <animate attributeName="stroke-dashoffset"

      from="200"  to="-1710"

      begin="0s" dur="3s"

      repeatCount="indefinite"/>  

 </use>

 <circle id="plug" class="circ" cx="0" cy="0" r="7"/> 

 <animateMotion

  xlink:href="#plug"

    dur="3s"

  rotate="auto"

  repeatCount="indefinite"

  calcMode="linear"

  keyTimes="0;1"    

  keyPoints="0;1">

  <mpath xlink:href="#loop-normal"/>

 </animateMotion> 

</svg>

</div>

---

Related Topics