Animation for SVG path within clip path doesn't work in Firefox?

Question

HTML for the effect:

<svg class="svg-defs2" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="640">
  <defs>
    <clipPath id="clipping2">
      <!--As much as you reduce the x-coordinate of start, expand exactly that
       much of end-->
      <path id="circle2" d='M30 190
      A40 40 0 0 1 350 190
      A40 40 0 0 1 30 190
      z
      M60 190
      A10 10 0 0 1 320 190
      A10 10 0 0 1 60 190
      z' clip-rule='evenodd'/>
    </clipPath>
  </defs>
</svg>

<!-- SVG spongecell  -->
<div class="wrapper">
  <img src="http://s26.postimg.org/mogt0be2h/Black.png" height="381" width="379" alt="Black Circuit">
  <div class="toBeMasked">
    <svg width="381" height="379">
      <image xlink:href="http://s26.postimg.org/ie254q8zd/pink.png" width="381" height="379" alt="Pink Circuit"/>
    </svg>
  </div>

  <div class="toBeMasked2">
    <svg width="381" height="379">
      <image xlink:href="http://s26.postimg.org/623u4zaih/blue.png" width="381" height="379" alt="blue Circuit"/>
    </svg>
  </div>
</div>
<!-- SVG block ends here -->

CSS:

.wrapper {
  width: 382px;
  clear: both;
  background: #535353;
}

.toBeMasked {
  position: absolute;
  top: 0;
}

 .svg-defs {
   position: absolute;
   width: 0;
   height: 0;
  }

.bullseye {
  position: absolute;
  top: 0;
}

  .svg-defs #circle {
     visibility: hidden;
     transform-origin: center center;
     -webkit-animation: move-mask running 1.5s ease;
     -moz-animation: move-mask running 1.5s ease;
     -o-animation: move-mask running 1.5s ease;
     animation: move-mask running 1.5s ease;
  }

 @-webkit-keyframes move-mask {
   0% {
 visibility: visible;
 -webkit-transform: scale(0, 0);
 -moz-transform: scale(0, 0);
 -ms-transform: scale(0, 0);
 transform: scale(0, 0);

}

100% {
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  -ms-transform: scale(2, 2);
  transform: scale(2, 2);
 }

}

  @-moz-keyframes move-mask {
    0% {
      visibility: visible;
     -webkit-transform: scale(0, 0);
     -moz-transform: scale(0, 0);
     -ms-transform: scale(0, 0);
     transform: scale(0, 0);
    }

    100% {
     -webkit-transform: scale(2, 2);
     -moz-transform: scale(2, 2);
     -ms-transform: scale(2, 2);
     transform: scale(2, 2);
    }
  }

 @keyframes move-mask {
   0% {
     visibility: visible;
     -webkit-transform: scale(0, 0);
     -moz-transform: scale(0, 0);
     -ms-transform: scale(0, 0);
     transform: scale(0, 0);
   }

    100% {
     -webkit-transform: scale(2, 2);
     -moz-transform: scale(2, 2);
     -ms-transform: scale(2, 2);
     transform: scale(2, 2);
    }
 }

  .toBeMasked2 {
    position: absolute;
    top: 0;
  }

 .svg-defs2 { position: absolute; width: 0; height: 0;}

 .svg-defs2 #circle2 {
    transform-origin: center center;
   -webkit-animation: move-mask2 running 1.5s ease;
   -moz-animation: move-mask2 running 1.5s ease;
   -o-animation: move-mask2 running 1.5s ease;
      animation: move-mask2 running 1.5s ease;
   animation-delay: 1.5s;
   visibility: hidden;
  }

  @-moz-keyframes move-mask2 {
   0% {
    visibility: visible;
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    transform: scale(2, 2);
  }
  100% {
   -webkit-transform: scale(0, 0);
   -moz-transform: scale(0, 0);
   -ms-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}

@-webkit-keyframes move-mask2 {
  0% {
    visibility: visible;
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    transform: scale(2, 2);
  }
  100% {
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}

@keyframes move-mask2 {
  0% {
     visibility: visible;
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    transform: scale(2, 2);
  }
  100% {
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}

Below is the jsfiddle for the code I had written for a signal flowing effect:

http://jsfiddle.net/shettyrahul8june/9dua7Lr8/

The code works fine for Google Chrome. But in mozilla it wasn't even clipping the image on localhost. Then I added the clip-path property to the style attribute of the image for clipping the path. In short I added inline styling to the image. But now the animation doesn't work on mozilla. Any help would be appreciated.

score 1 · Accepted Answer · edited May 23 '17 at 12:02

I changed my code a bit and below is the code that acted to be the key in making this effect work. Compatible on all browsers.

In short:

Created a SVG of the Primary image.(Black)
Created a SVG of the image which is required to show the flow of current through the primary image. (Pink and Blue)
Clipped the Pink and Blue SVG and also applied the clip rule attribute with the value evenodd for hollow space in between.
CSS3 animation rarely works on clip path. So applied the transform attribute to clip path.
Created the effect of current flow using JS (I accept that the code writted in JS could be reduced)

Here is the working example: https://jsfiddle.net/qg6orcuw/

JS:

(function() {

  $('body').addClass('show');

  var pinkClip = document.getElementById("square"),
  pinkVal = 0.2,
  pinkCircuit;

  // Start state
  var state = {
    x: 0,
    y: 0,
    scale: 1
  };

// Origin of transform: translate();
var oX = 190,
oY= 190;

var changeScale = function (scale, selector) {

    //Example value in scaleD would be 0.1 (scale) / 1 (state.scale) = 0.1
  var scaleD = scale / state.scale,
  currentX = state.x,
  currentY = state.y;

  // The magic of calculating transform
  var x = scaleD * (currentX - oX) + oX,
  y = scaleD * (currentY - oY) + oY;

  state.scale = scale;
  state.x = x;
  state.y = y;

  // var transform = "matrix("+scale+",0,0,"+scale+",90, 90)";
  var transform = "matrix("+scale+",0,0,"+scale+","+x+","+y+")";
  //var transform = "translate("+x+","+y+") scale("+scale+")"; //same
  selector.setAttribute("transform", transform);
};

var expandScale = function() {
    changeScale(pinkVal, pinkClip);
    if(pinkVal <= 2){
        pinkVal += 0.2;
    } else{
        pinkVal = 0.2;
    }
};

    pinkCircuit = setInterval(expandScale, 100);
})();

Helpful links:

Animation for SVG path within clip path doesn't work in Firefox?

1 Answers1

Linked