Question

效果的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上不起作用。任何帮助将不胜感激。

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

有用的链接：

剪辑路径中的SVG路径动画在Firefox中不起作用？

1 个答案: