Question

在使用SVG路径开发动画聚光灯的过程中，我遇到了跨浏览器问题。我有一个SVG路径，其中一个形状覆盖整页和半透明，另一个形状使用＆＃34; evenodd＆＃34;属性。然后使用jQuery我改变路径坐标和所谓的聚光效果工作。聚光灯是动画的，因为我已经为所有路径添加了过渡样式，并且所有路径都在Chrome上运行但不在Firefox和IE上。在Firefox和IE中，它执行时没有轻微的动画，只是跳到新的位置。

有没有人遇到过这种问题？是否有解决方法来解决这种聚光灯问题？

点击按钮以更改形状。

＆＃13;

$("#mod").click(function() {
  $(".cls-1").attr("d", "M0,0 V1000 H1600 V0 M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z");
})

$("#cir").click(function() {
  $(".cls-1").attr("d", "M0,0 V1000 H1600 V0 M400,100 h100 a200,200 0 0 1 200,200 v0 a200,200 0 0 1 -200,200 h0 a200,200 0 0 1 -200,-200 v0 a200,200 0 0 1 200,-200 z");
})

$("#tomenu").click(function() {
  $(".cls-1").attr("d", "M0,0 V1000 H1600 V0 M"+$(".menu").position().left+","+$(".menu").position().top+" h"+$(".menu").width()+" a0,0 0 0 1 0,0 v"+$(".menu").height()+" a0,0 0 0 1 0,0 h-"+$(".menu").width()+" a0,0 0 0 1 0,0 v-"+$(".menu").height()+" a0,0 0 0 1 0,0 z");
})

＆＃13;

body {
  background: #FFFFFF url(http://vahramtorosyan.com/reps/pexels-photo-356056.jpeg) no-repeat;
  padding: 0px;
  margin: 0px;
  background-size: cover
}

path, circle, line {
      transition: all 1s;
      -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
}


.menu {
  width: 200px;
  height: 1500px;
  position: absolute;
  z-index: 9001;
}

.block {
  width: 220px;
  height: 1500px;
  position: absolute;
  z-index: 9000;
}

.maindiv {
  width: 100%; 
  height: 100%;
  z-index: 9999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<div class="menu"></div>
<div class="block"></div>
<div style="maindiv">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">       <defs>
  <style>.cls-1{fill:#0c78bf; fill-opacity: .8}</style>
  </defs>
  <title>Testing SVG</title>
  <path class="cls-1" fill-rule="evenodd" d="M0,0 V1000 H1600 V0 M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z"/>  
</svg>  
</div>

<button id="mod" style="z-index: 9999; position: absolute; top: 10px; left: 25px;">SHAPE 1</button>

<button id="cir" style="z-index: 9999; position: absolute; top: 10px; left: 110px;">SHAPE 2</button>

<button id="tomenu" style="z-index: 9999; position: absolute; top: 10px; left: 195px;">SHAPE 3</button>

＆＃13;

SVG上的动画转换在Firefox和IE

0 个答案: