如何从JS制作蒙版SVG动画？

oei 发表于 Dev

哎呀

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

需要制作一个移动的面具。

整天都在寻找答案，很拼命。我将很高兴就该主题提出任何建议。

丹尼·法迪（Danny Fardy JhonstonBermúdez）

使用svg mask，您可以执行以下操作：

(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。