SNAP.SVG

Question

kullanarak SVG'lerin düzgün yüklenmesi Snap.SVG kullanarak bir nokta ve tıklat-macera benzeri web sitesi yaptım. Bu bir çeşit işler! ama bunu geliştirmek isterim.

www.esad.se (sonraki resme gitmek için sağdaki oku tıklayın!)

biz (o zaman bana yardımcı öğretmen ile birlikte) karşılaşılan en büyük problem SVG açıklığı benim topluluk içinde yineleme oldu - SVG'ye tıklamak, yeni sayfaya ve yeni svg'nin ana sayfaya yüklenmesine neden olur. Kullandığımız çözüm SVG yolları içeren bir diziye işaret etmek ve özellikle çünkü, biz yine de muhtemelen en iyi çözüm değildi

event.target.parentNode.parentNode.remove() 

ile DOM manipüle ederek eski SVG öldürmek oldu svgs arasında yumuşak bir geçişe izin vermez.

SVG'lerim arasında (örneğin, çapraz solma) düzgün geçişleri uygulamak için bir yükleme yöntemi kullanmanın bir yolu olabilir mi? İçgörüleriniz için

teşekkürler.

var s = Snap("#svg"); 
 
    var first = "A1.JPG" 
 
    var data = { 
 
     "A1.JPG" : {viens : "A2.JPG", svg : "1.svg"}, 
 
     "A2.JPG" : {viens : "A3.JPG", svg : "2.svg", scroll : 600} 
 

 
    // [... etc] 
 
    
 
    } 
 

 
    var currentPath = data[first] 
 
    document.images.main.src = first 
 

 

 

 

 
    var mySvg = Snap.load(currentPath.svg, function(loadedFragment){ 
 
     s.append(loadedFragment) 
 
     s.click(getEventElement) 
 
     window.scroll(0,0) 
 
    }); 
 

 

 
    function getEventElement(event) { 
 
     if(event.target.localName == 'svg') { return } 
 

 
     target = event.target.parentNode.id 
 

 
//  if (target == "noclick") {return} 
 

 
if(currentPath[target] == undefined) { 
 

 
return 
 
} 
 

 
document.images.main.src = currentPath[target] 
 
currentPath = data[currentPath[target]] 
 
     //this.clear() 
 
     event.target.parentNode.parentNode.remove() 
 

 
     if(currentPath.hasOwnProperty("scroll")){ 
 
     window.scroll(currentPath.scroll,0) 
 
     }else{ 
 
     window.scroll(0,0) 
 
     } 
 

 
     mySvg = Snap.load(currentPath.svg, function(loadedFragment){ 
 
     s.append(loadedFragment) 
 
     //s.click(getEventElement) 
 
     }); 
 

 

 

 
    }

Answer 1

Bir CSS sınıfı ile bunu sadece ederim. eklemek elemanı için CSS'nizde Sonra

event.target.classList.add('fade-out'); 
setTimeout (function() { 
    event.target.parentNode.removeChild(event.target); 
}, 2000); 

: size DOM eleman çıkarmak satırı değiştirin

opacity: 1; 
transition: opacity 1.5s; 

Ve solmaya-out için yeni bir tarz ekleyin:

.yourSvgClass.fade-out { 
    opacity: 0; 
}