剪辑路径中的SVG路径的动画在Firefox中不起作用？ [英] Animation for SVG path within clip path doesn't work in Firefox?

查看：164
本文介绍了剪辑路径中的SVG路径的动画在Firefox中不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HTML的效果：





$ b 

 < svg class =svg-defs2version =1.1xmlns =http://www.w3.org/2000/svgheight =200width = 640\" > 
< defs> 
< clipPath id =clipping2> 
 <！ -   - 尽可能减少start的x坐标，精确地扩展
的大部分结束 - > 
  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海绵单元 - > 
< 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> 
 <！ -  SVG块在这里结束 - >

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一个信号流动的效果：
 
 
  http：// jsfiddle。 net / shettyrahul8june / 9dua7Lr8 /  
 
 
 
这些代码适用于Google Chrome。但在Mozilla中甚至没有裁剪本地主机上的图像。然后，我将clip-path属性添加到图像的style属性中以剪切路径。总之，我添加了内联样式的形象。但是现在动画在mozilla 上不起作用。任何帮助，将不胜感激。
 
解决方案
我改变了一下我的代码是下面的代码这个效果工作。兼容所有浏览器。
 
 
 
总之： 
 
 
     
     
  1. 创建了一个SVG主图像（黑色）
    2.  
     
  2. 创建图像的SVG，显示主图像中流动的电流。 （粉红色和蓝色）
    3.  
     
  3. 剪下粉红色和蓝色SVG，并在剪裁规则属性中使用值evenodd作为中间空格。
    4.  
     
  4. 剪辑路径上很少使用CSS3动画。因此，将transform属性应用于剪辑路径。
     
  5. 使用JS创建当前流的效果（我接受在JS中写入的代码可以减少）
     
下面是一个工作示例： https://jsfiddle.net / qg6orcuw /  
 
 
 
 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 <= 2）{
 pinkVal + = 0.2; 
} else {
 pinkVal = 0.2; 
} 
}; 
 
 pinkCircuit = setInterval（expandScale，100）; 
}）（）; 
  
有用的链接： 
 
 
     
     
  1.  
     如何在SVG中设置转换原点 
    2.       
      http://greensock.com/forums/topic/11968-signal-flowing-through-the-circuit/?hl=signal#entry49179  
      
     
 
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:
    

  1. Created a SVG of the Primary image.(Black)
    2. 

  2. Created a SVG of the image which is required to show the flow of current through the primary image. (Pink and Blue)
    3. 

  3. Clipped the Pink and Blue SVG and also applied the clip rule attribute with the value evenodd for hollow space in between.
    4. 

  4. CSS3 animation rarely works on clip path. So applied the transform attribute to clip path.
    5. 

  5. Created the effect of current flow using JS (I accept that the code writted in JS could be reduced)
    6. 

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: 
    

  1. How to set transform origin in SVG
    2. 

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



                        
这篇关于剪辑路径中的SVG路径的动画在Firefox中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆