如何从 js 动画蒙版 svg?
How to animate a mask svg from js?
如何使用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>
需要制作移动面具。
整天都在寻找答案,很绝望。我很乐意就此主题提出任何建议。
您可以在一个矩形上绘制另一个矩形。
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/
使用 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>
如何使用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>
需要制作移动面具。
整天都在寻找答案,很绝望。我很乐意就此主题提出任何建议。
您可以在一个矩形上绘制另一个矩形。
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/
使用 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>