如何从JS制作蒙版SVG动画? [英] How to animate a mask svg from js?
本文介绍了如何从JS制作蒙版SVG动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用JS遮罩进行动画处理,并遮罩图层和图层遮罩SVG?不使用第三方库?
How to animate using js mask, and masked the layer and layer mask svg? Without using third-party libraries?
<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>
需要制作可移动的口罩.
Need to make a moving mask.
整天都在寻找答案,而且很拼命.我将很高兴就该主题提出任何建议.
Was looking for an answer all day and is desperate. I will be glad to any advice on the topic.
推荐答案
使用svg掩码,您可以执行以下操作:
Using svg mask, you can do something like this:
(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>
这篇关于如何从JS制作蒙版SVG动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文