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

Enhance web design with dynamic size pseudo elements using only CSS, no

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

Step-by-step guide on using variables to apply CSS

I'm looking to center my btn button vertically and horizontally over two images using Bootstrap 5 in a responsive manner. How can I achieve this?

Is it feasible to combine border-radius with a gradient border-image?

Distinguish a specific div within a group of divs by styling it uniquely using just CSS and HTML

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

CSS animation is supported on most browsers with the exception of Safari

Creating a sleek grayscale effect when hovering with CSS is both simple and effective

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

PHP tag iteration for unordered list segmentation

What is the process for obtaining X through the use of createElement('img')?

Python Selenium for Element Detection

div not recognizing the minimum height specified in percentage

The information is not being stored in Excel despite the fact that the Excel document has been generated with a header

The issue with jquery's marginTop functionality appears to be malfunctioning

The text alignment in Internet Explorer is off

When table cells are added dynamically, they are not encompassed by the solid fixed title bar when scrolling

Decrease the heaviness of a Glyphicon

Incorporate SVG files into a TypeScript React application using Webpack