L'animazione per il percorso SVG all'interno del percorso della clip non funziona in Firefox?

Question

HTML per l'effetto:

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

riportano di seguito le jsfiddle per il codice che avevo scritto per un segnale di effetto che scorre:

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

Il codice funziona correttamente per Google Chrome. Ma in Mozilla non è stato nemmeno ritagliare l'immagine su localhost. Quindi ho aggiunto la proprietà del percorso clip all'attributo style dell'immagine per ritagliare il percorso. In breve, ho aggiunto lo stile in linea all'immagine. Ma ora l'animazione non funziona su mozilla. Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Ho cambiato un po 'il mio codice e sotto c'è il codice che ha funzionato come chiave per far funzionare questo effetto. Compatibile su tutti i browser.

In breve:

1. Creato uno SVG delle immagini primarie (nero)
2. creato una SVG dell'immagine che è necessario per mostrare il flusso di corrente attraverso l'immagine principale.. (Rosa e blu)
3. Tagliato l'SVG rosa e blu e applicato anche l'attributo della regola del clip con il valore pari in uno spazio vuoto intermedio.
4. L'animazione CSS3 funziona raramente sul percorso della clip. Quindi applicato l'attributo transform al percorso della clip.
5. creato l'effetto del flusso di corrente utilizzando JS (Accetto che il codice writted in JS potrebbe essere ridotta)

Ecco l'esempio di lavoro: 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); 
})(); 

Link utili:

1. How to set transform origin in SVG

2. http://greensock.com/forums/topic/11968-signal-flowing-through-the-circuit/?hl=signal#entry49179