Question

h1大家，我试图基于svg mask为svg元素制作跨浏览器动画。起初，我发现了一个用css的bug，在firefox面具中没有使用css＆＃39; width＆＃39;和＆＃39; height＆＃39;，仅限内联属性。那么，下一个问题 - 如何为firefox制作面具动画，没有什么比“宽度调整大小更难”了。 https://codepen.io/flyby/pen/KmYOgb

<div id='cont'>
  <svg>
    <defs>
      <mask id='rectMask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
        <rect x='0' y='0' id='maskRect' width='700' height='850'/>
      </mask>
    </defs>
    <path id='maskedPath' d='m 0,0 l 650,0 -100,850 -550,0 z' mask='url(#rectMask)'/>
    <path id='riverPath' d='m 653,0 l -100,850' mask='url(#rectMask)'/>
    <path id='notMaskedPath' d='m 655,0 l 650,0 0,850 -750,0 z'/>
  </svg>
</div>

CSS：

body {
  margin:0;
  padding:0;
  overflow:hidden;
}
#cont {
  width:100vw;
  height:100vh;
  background-color:rgb(50,50,50);
}
svg {
  width:100%;
  height:100%;
}
#maskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#notMaskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#riverPath {
  stroke:rgb(50,160,240);
  stroke-width:8;
  fill:none;
}
#maskRect {
  width:0px;
  height:850px;
  fill:white;
  stroke:none;
  animation: resize 3s linear infinite;
}
@-moz-keyframes resize {
  50% {width: 700px !important;}
  0%,100% {width: 0px !important;}
}

Answer 1

就像您发现的那样，您可以（还）设置几何属性，例如Firefox中的width和height SVG元素。这不是一个错误。这只是Firefox尚未实现的SVG 2，但Chrome已经实现了。

解决方案是使用内置的SVG（＆＃34; SMIL＆＃34;）动画元素，而不是CSS动画。

＆＃13;

body {
  margin:0;
  padding:0;
  overflow:hidden;
}
#cont {
  width:100vw;
  height:100vh;
  background-color:rgb(50,50,50);
}
svg {
  width:100%;
  height:100%;
}
#maskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#notMaskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#riverPath {
  stroke:rgb(50,160,240);
  stroke-width:8;
  fill:none;
}
#maskRect {
  fill:white;
  stroke:none;
}

＆＃13;

<!--this animation doesn't work in FIREFOX, and not tested in IE11 ad Edge YET, WILL BE FIXED SOON (I HOPE)-->
<div id='cont'>
  <svg>
    <defs>
      <mask id='rectMask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
        <rect x='0' y='0' width="0" height="850" id='maskRect'>
          <animate attributeName="width"
                   keyTimes="0; 0.4; 0.5; 1"
                   values="0; 670; 670; 0"
                   dur="4s" repeatCount="indefinite"/>
        </rect>
      </mask>
    </defs>
    <path id='maskedPath' d='m 0,0 l 650,0 -100,850 -550,0 z' mask='url(#rectMask)'/>
    <path id='riverPath' d='m 653,0 l -100,850' mask='url(#rectMask)'/>
    <path id='notMaskedPath' d='m 655,0 l 650,0 0,850 -750,0 z'/>
  </svg>
</div>

＆＃13;

动画的svg面具在firefox中不起作用

1 个答案: