问题描述
HTML的效果:$ b
< svg class =svg-defs2version =1.1xmlns =http://www.w3.org/2000/svgheight =200width = 640\" >
< defs>
< clipPath id =clipping2>
的大部分结束 - >
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>
< div class =wrapper>
< img src =http://s26.postimg.org/mogt0be2h/Black.pngheight =381width =379alt =Black Circuit>
< div class =toBeMasked>
< svg width =381height =379>
< / svg>
< / div>
< div class =toBeMasked2>
< svg width =381height =379>
< / svg>
< / div>
< / div>
CSS:
.wrapper {
width:382px;
明确:两者;
背景:#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:移动遮罩运行1.5s缓解;
-moz-animation:移动掩码运行1.5s缓解;
-o-animation:运行1.5s缓动的面具;
动画:移动面具运行1.5s缓解;
}
@ -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);
$ b 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;宽度:0; height:0;}
.svg-defs2#circle2 {
transform-origin:center center;
-webkit-animation:move-mask2运行1.5s缓解;
-moz-animation:move-mask2运行1.5s缓解;
-o-animation:move-mask2运行1.5s缓解;
动画:move-mask2运行1.5s缓解;
animation-delay:1.5s;
可见性:隐藏;
}
@ -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);
$ p $以下是我写的代码的jsfiddle一个信号流动的效果:
这些代码适用于Google Chrome。但在Mozilla中甚至没有裁剪本地主机上的图像。然后,我将clip-path属性添加到图像的style属性中以剪切路径。总之,我添加了内联样式的形象。但是现在动画在mozilla 上不起作用。任何帮助,将不胜感激。
解决方案我改变了一下我的代码是下面的代码这个效果工作。兼容所有浏览器。
总之:
- 创建了一个SVG主图像(黑色)
- 创建图像的SVG,显示主图像中流动的电流。 (粉红色和蓝色)
- 剪下粉红色和蓝色SVG,并在剪裁规则属性中使用值evenodd作为中间空格。
- 剪辑路径上很少使用CSS3动画。因此,将transform属性应用于剪辑路径。
- 使用JS创建当前流的效果(我接受在JS中写入的代码可以减少)
下面是一个工作示例:
JS:
(){
$ b $('body')。addClass('show');
var pinkClip = document.getElementById(square),
pinkVal = 0.2,
pinkCircuit;
//开始状态
var state = {
x:0,
y:0,
scale:1
$;
//变换的起源:translate();
var oX = 190,
oY = 190;
var changeScale = function(scale,selector){
// scaleD中的示例值为0.1(scale)/ 1(state.scale)= 0.1
var scaleD = scale / state.scale ,
currentX = state.x,
currentY = state.y;
// cal culating变换
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 +); //相同
selector.setAttribute(transform,transform);
};
var expandScale = function(){
changeScale(pinkVal,pinkClip);
if(pinkVal pinkVal + = 0.2;
} else {
pinkVal = 0.2;
}
};
pinkCircuit = setInterval(expandScale,100);
})();
有用的链接:
-
HTML for the effect:
<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);
}
}
Below is the jsfiddle for the code I had written for a signal flowing effect:
http://jsfiddle.net/shettyrahul8june/9dua7Lr8/
The code works fine for Google Chrome. But in mozilla it wasn't even clipping the image on localhost. Then I added the clip-path property to the style attribute of the image for clipping the path. In short I added inline styling to the image. But now the animation doesn't work on mozilla. Any help would be appreciated.
解决方案 I changed my code a bit and below is the code that acted to be the key in making this effect work. Compatible on all browsers.
In short:
- Created a SVG of the Primary image.(Black)
- Created a SVG of the image which is required to show the flow of current through the primary image. (Pink and Blue)
- Clipped the Pink and Blue SVG and also applied the clip rule attribute with the value evenodd for hollow space in between.
- CSS3 animation rarely works on clip path. So applied the transform attribute to clip path.
- Created the effect of current flow using JS (I accept that the code writted in JS could be reduced)
Here is the working example: 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);
})();
Helpful links:
这篇关于剪辑路径中的SVG路径的动画在Firefox中不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!