Is animation not functioning for SVG path within a clip path on Firefox?

Question

Is animation not functioning for SVG path within a clip path on Firefox?

Creating the HTML for a unique effect:

<svg class="svg-defs2" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="640">
  <defs>
    <clipPath id="clipping2">
      <!--Adjusting the x-coordinate of start will expand the end accordingly-->
      <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>

<!-- Working with SVG images -->
<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>
<!-- End of SVG code -->

CSS styling applied to achieve the desired effects:

.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;
}

 /* Animation for circle */
.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;
  }


 /* Keyframes and animation details */
@keyframes move-mask {
   0% {
     visibility: visible;
     -webkit-transform: scale(0, 0);
     -moz-transform: scale(0, 0);
     transform: scale(0, 0);

  }

    100% {
     -webkit-transform: scale(2, 2);
     -moz-transform: scale(2, 2);
     transform: scale(2, 2);
    }
 }
 
/* Additonal animations for masking*/
.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;
  }
  
 /* Additional keyframe animatons */
@keyframes move-mask2 {
  0% {
visibility: visible;
transform: scale(2, 2);
  }
  100% {
transform: scale(0, 0);
}
}

If you'd like to view the working code, check out this link on jsfiddle:

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

The code functions well on Google Chrome but experiences issues with clipping images on Mozilla. To address this, inline styling was added to the image's style attribute for clipping purposes. However, this caused animation problems specifically on Mozilla browsers. Any suggestions or assistance would be greatly appreciated.

css firefox svg

Answer 1

Answer №1

After tweaking my code, I finally found the solution that made the desired effect work flawlessly across all browsers.

To sum it up:

First, I created a SVG of the primary image in black.
Next, I created a SVG of another image to display the flow of current through the primary image in pink and blue colors.
I then clipped the pink and blue SVG and applied the clip rule attribute with the value evenodd to show the hollow space between them.
Since CSS3 animation doesn't work well on clip path, I utilized the transform attribute to manipulate the clip path accordingly.
To showcase the flow effect, I implemented a JavaScript code (acknowledging that there is room for improvement in reducing JS code).

You can view the working example here: https://jsfiddle.net/qg6orcuw/

Javascript Code:

(function() {

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

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

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

// Origin point of the 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;

  // Calculating transform values
  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+","+x+","+y+")";
  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:

How to set transform origin in SVG

Answer 2

After tweaking my code, I finally found the solution that made the desired effect work flawlessly across all browsers.

To sum it up:

First, I created a SVG of the primary image in black.
Next, I created a SVG of another image to display the flow of current through the primary image in pink and blue colors.
I then clipped the pink and blue SVG and applied the clip rule attribute with the value evenodd to show the hollow space between them.
Since CSS3 animation doesn't work well on clip path, I utilized the transform attribute to manipulate the clip path accordingly.
To showcase the flow effect, I implemented a JavaScript code (acknowledging that there is room for improvement in reducing JS code).

You can view the working example here: https://jsfiddle.net/qg6orcuw/

Javascript Code:

(function() {

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

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

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

// Origin point of the 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;

  // Calculating transform values
  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+","+x+","+y+")";
  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:

How to set transform origin in SVG

Is animation not functioning for SVG path within a clip path on Firefox?

Answer №1

Similar questions

What is the best way to ensure the right six-column DIV remains at the top in responsive web design?

What is the process of displaying text within a link?

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

Adding a three-dimensional perspective to an HTML5 canvas without utilizing CSS3 or WebGL

Javascript on-page scroll positioning

Whenever I nest my div tags within another div element in an HTML document

Ensure that radio buttons are positioned next to their respective labels on separate lines

The function `driver.getPageSource()` changes the symbols `<` to `<` during conversion

The justify-content property aligns single-line text horizontally, but its alignment may not be consistent when the text expands over

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

The web font fails to display on different computers

What steps should I take to create a collapsible Bootstrap navbar?

Reveal and conceal using CSS animations

Hover effect triggered upon mouse exit

Centered inline-block divisions

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

The not:first-child selector targets all elements except for the first one in the sequence

Creating a responsive layout with Bootstrap using fluid rows and columns of varying heights

A method for positioning each pair of <li> elements side by side

Having problems initiating a remote session with WebDriver - encountering a TypeError: string indices should be integers