2
SVG要素（パスのみ）でアニメーションを使用しています（JavaScriptのパスの可視性プロパティを頻繁に切り替える）。 SVGには背景イメージがあります。表示されるパスの中には、ストロークの背景イメージ（パスを消去しているかのように表示される）が必要です。私は次のようにこれを行うにはSVGのマスキング機能を使用します。SVGパスのストロークを背景イメージにする方法は？
var t = 0;
var displayDictionary = {};
function fillDisplayDictionary()
{
var paths = document.querySelectorAll("svg path");
for(var index=0; index < paths.length; index++)
{
var path = paths[index];
var pathDisplayTime = parseInt(path.getAttribute("data-t"));
displayDictionary[pathDisplayTime] = path;
}
}
function displayNextElement()
{
displayDictionary[t].style.visibility = "visible";
t++;
if(t == 5)
clearInterval(interval);
}
fillDisplayDictionary();
interval = setInterval(displayNextElement, 40);svg path
{
visibility: hidden;
}<!DOCTYPE html>
<html>
<body>
<svg height="400" width="450">
<!-- this is the background image -->
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
<!-- these are ordinary paths -->
\t <path data-t="0" d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
<path data-t="1" d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
<path data-t="2" d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
<path data-t="3" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
<mask id="mask">
<!-- this is the erasing path -->
<path data-t="4" d="M 0 0 L 400 450" stroke="white" stroke-width="20" />
</mask>
<!-- this is an image identical to the background image, and it is masked by the above path-->
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450" mask="url(#mask)"></image>
</svg>
</body>
</html>ストロークの背景画像の有無にかかわらず、あまりにも多くのパスがあります。これはChromeでうまくいきます。しかし、FireFoxでは、アニメーション処理が非常に遅くなり、消去パス（すなわち、ストローク上に背景画像を有するパス）が表示される。 Firefoxがうまく対応している消去パスを表示する方法はありますか？
それは高速ですが、それはまだFirefoxで遅れています。グループに複数のマスクを適用する簡単な方法はありますか？ –
なぜ複数のマスクが必要ですか？常にマスク定義に要素を追加できます。または、別のグループにグループをラップして、それに2番目のマスクを適用することもできます。 –