Klip yolundaki SVG yolu için animasyon Firefox'ta çalışmıyor mu? etki için

HTML: Klip yolundaki SVG yolu için animasyon Firefox'ta çalışmıyor mu? etki için

<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:

: Aşağıda

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

Ben bir sinyal etkisi akan için yazdığı kod için jsfiddle olduğunu http://jsfiddle.net/shettyrahul8june/9dua7Lr8/

Kod, Google Chrome için uygun çalışıyor. Fakat mozillada, görüntüyü localhost'ta kırpmıyordu. Sonra yolu kırpma için görüntünün stil özniteliğine klip yolu özelliğini ekledim. Kısacası görüntüye satır içi stil ekledim. Ancak şimdi animasyonu mozilla'da çalışmıyor. Herhangi bir yardım takdir edilecektir.

kaynak

2015-07-03 rash.tay

Kodumu biraz değiştirdim ve bu etkiyi gerçekleştirmede anahtar rol oynayan kod aşağıdadır. Tüm tarayıcılarda uyumludur. Kısaca

birincil görüntünün bir SVG'yi (siyah)
birincil görüntü üzerinden akım akışını göstermek için gerekli olan görüntünün bir SVG'yi düzenlendi.. (Pembe ve Mavi)
Pembe ve Mavi SVG'yi kırpın ve aynı zamanda klip kural özniteliğini aradaki boşluk için düz olan değerle uyguladı.

CSS3 animasyonu, nadiren klip yolunda çalışır. Bu nedenle, dönüşüm özelliğini klip yoluna uyguladı. 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); 
})();

JS kullanarak mevcut akışın etkisi (I JS writted kod azaltılabileceğini kabul)

çalışma örneğidir düzenlendi Yararlı bağlantılar:

kaynak

2015-07-13 11:17:10

Klip yolundaki SVG yolu için animasyon Firefox'ta çalışmıyor mu? etki için

cevap

İlgili konular