如何从 js 为蒙版 svg 设置动画？答案

【问题标题】：How to animate a mask svg from js?如何从 js 为蒙版 svg 设置动画？
【发布时间】：2016-01-16 11:19:34
【问题描述】：

如何使用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>

需要制作一个移动蒙版。

整天都在寻找答案，很绝望。我很乐意听取有关该主题的任何建议。

【问题讨论】：

标签： javascript html css svg mask

【解决方案1】：

您可以在另一个矩形上绘制一个矩形。

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/

【讨论】：

【解决方案2】：

使用 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>

【讨论】：