Comment faire le coup d'un chemin SVG prendre l'image de fond?

J'utilise l'animation sur les éléments SVG (uniquement les chemins) (juste en basculant la propriété de visibilité des chemins très fréquemment avec JavaScript). Le SVG a une image d'arrière-plan. Certains des chemins affichés doivent avoir l'image d'arrière-plan sur le trait (pour apparaître comme des chemins d'effacement). J'utilise la capacité de masquage de SVG pour ce faire comme suit:Comment faire le coup d'un chemin SVG prendre l'image de fond?

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>

Il y a trop de chemins avec ou sans image de fond sur la course. Cela fonctionne bien dans Chrome. Cependant, dans FireFox, le processus d'animation devient très lent tout en affichant un chemin d'effacement (c'est-à-dire un chemin avec l'image d'arrière-plan sur le coup). Existe-t-il un autre moyen d'afficher un chemin d'effacement auquel Firefox répond bien?

Source

2017-10-11 Wessam Sharaf

Vous n'avez pas besoin de recaler avec une version masquée de l'image. Il suffit d'appliquer le masque sur les lignes à la place.

<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 --> 
 
    <g mask="url(#mask)"> 
 
    <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" /> 
 
    </g> 
 
     
 
    <mask id="mask"> 
 
    <!-- this is the erasing path --> 
 
    <rect width="100%" height="100%" fill="white"/> 
 
    <path data-t="4" d="M 0 0 L 400 450" stroke="black" stroke-width="20" /> 
 
    </mask> 
 
    
 
</svg>

Source

2017-10-11 09:02:54

Il est plus rapide, mais il est toujours en retard dans Firefox. Existe-t-il un moyen simple d'appliquer plus d'un masque sur un groupe? –

Pourquoi avez-vous besoin de plus d'un masque? Vous pouvez toujours ajouter plus d'éléments à la définition du masque. Ou vous pouvez envelopper le groupe dans un autre groupe, puis appliquer un second masque à cela. –

Comment faire le coup d'un chemin SVG prendre l'image de fond?

Répondre

Questions connexes