Анимация для пути SVG в пути клипа не работает в Firefox?
HTML для эффекта:
<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);
}
}
Ниже приведен jsfiddle для кода, который я написал для эффекта потока сигнала:
http://jsfiddle.net/shettyrahul8june/9dua7Lr8/
код отлично работает для Google Chrome. Но в mozilla он даже не обрезал изображение на localhost. Затем я добавил свойство clip-path к атрибуту style изображения для подстригаю дорожку. Короче говоря, я добавил встроенный стиль к изображению. Но теперь анимация не работает на mozilla. Любая помощь будет оценена.
1 ответов
Я немного изменил свой код, и ниже приведен код, который действовал как ключ к работе этого эффекта. Совместимость во всех браузерах.
короче:
- создал SVG основного изображения.(Черный)
- создал SVG изображения, которое требуется, чтобы показать поток тока через основное изображение. (Розовый и синий)
- обрезал розовый и синий SVG, а также применил атрибут правила клипа со значением evenodd для пустого пространства в между.
- CSS3 анимация редко работает на пути клипа. Поэтому применил атрибут transform к пути клипа.
- создал эффект текущего потока с помощью JS (я принимаю, что код, записанный в JS, может быть уменьшен)
вот рабочий пример: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);
})();
Полезные ссылки: