Hoạt ảnh cho đường dẫn SVG trong đường dẫn clip không hoạt động trong Firefox?

Question

HTML cho hiệu lực:

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

Dưới đây là jsfiddle cho mã tôi đã viết cho một tín hiệu hiệu lực chảy:

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

Mã hoạt động tốt cho Google Chrome. Nhưng trong mozilla nó thậm chí không cắt hình ảnh trên localhost. Sau đó, tôi đã thêm thuộc tính clip-path vào thuộc tính style của hình ảnh để cắt đường dẫn. Tóm lại, tôi đã thêm kiểu nội tuyến vào hình ảnh. Nhưng hiện tại, hoạt ảnh không hoạt động trên mozilla. Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Tôi đã thay đổi mã của mình một chút và bên dưới là mã hoạt động là chìa khóa để làm cho hiệu ứng này hoạt động. Tương thích trên tất cả các trình duyệt.

Nói tóm lại:

1. Tạo một SVG của hình ảnh Tiểu học (Black)
2. Tạo một SVG của hình ảnh đó là cần thiết để hiển thị các dòng chảy của dòng điện qua hình ảnh ban đầu.. (Màu hồng và màu xanh)
3. Cắt bỏ màu hồng và xanh SVG và cũng áp dụng thuộc tính quy tắc clip với giá trị mặc định cho khoảng trống ở giữa.
4. Hoạt ảnh CSS3 hiếm khi hoạt động trên đường dẫn clip. Vì vậy, áp dụng thuộc tính transform cho đường dẫn clip.
5. tạo ảnh hưởng của dòng điện sử dụng JS (Tôi chấp nhận rằng mã writted trong JS có thể được giảm)

Dưới đây là ví dụ làm việc: 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); 
})(); 

Các liên kết hữu ích:

1. How to set transform origin in SVG

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