如何从js动画一个面具svg？

Question

如何使用js掩码设置动画，并掩盖图层和图层掩码svg？没有使用第三方库？

<svg id="mask-layer" width="200" height="50" > 
    <defs> 
     <mask id="mask"> 
      <rect width="200" height="50" style="fill: red" /> 
     </mask> 
    </defs> 
    <rect id="masked" width="200" height="50" style="fill: red"/> 
</svg> 

需要做一个移动的面具。

一直在寻找一个答案了一整天，是绝望。我很乐意就这个话题提供任何建议。

Answer 1

使用SVG面膜，你可以做这样的事情：

(function() { 
 
    var btnMove = document.getElementById("btnMove"); 
 
    var rect = document.getElementById("rect"); 
 
    var pos = 100; 
 
    btnMove.addEventListener("click", function() { 
 
    rect.setAttribute("x", pos); 
 
    pos += 100; 
 
    }); 
 
})();

<svg id="mask-layer" width="200" height="50"> 
 
    <defs> 
 
    <mask id="mask" style="stroke: #9595C6;"> 
 
     <rect width="200" height="50" /> 
 
    </mask> 
 
    </defs> 
 
    <rect id="rect" x="0" y="0" width="200" height="50" style="fill: #9595C6;" /> 
 
    <rect x="0" y="0" width="200" height="50" mask="url(#mask)" /> 
 
</svg> 
 
<br /> 
 
<button id="btnMove">Move</button>

Answer 2

您可以在另一个上画一个矩形。

HTML：

<svg id="mask-layer" width="200" height="50" > 
    <rect id="masked" width="200" height="50" style="fill: blue"/> 
    <rect id='mask' width="0" height="50" style="fill: red" /> 
</svg> 

<br /> 
<span id='progress'></span> 

的Javascript：

(function() { 
    var mask = document.getElementById('mask'); 
    var progressSpan = document.getElementById('progress'); 
    var fullWidth = 200; 
    var curWidth = mask.getAttribute('width'); 

    var calculateProgress = function() { 
     var progress = (curWidth*100)/fullWidth; 
     progressSpan.innerHTML = ['Progress: ', Math.floor(progress), '%'].join(''); 
    } 

    var interval = setInterval(function() { 
     mask.setAttribute('width', ++curWidth); 
     calculateProgress(); 
     if(curWidth > fullWidth) { 
      clearInterval(interval); 
      progressSpan.innerHTML = 'Finished!'; 
     } 
    }, 50); 
})(); 

在这里，你已经工作示例：https://jsfiddle.net/L1vy2t3o/