使用 SNAP.SVG 平滑加载 SVG

Question

我使用 Snap.SVG 制作了一个点击式冒险类网站。有点管用！但我想改进一下。

www.esad.se （点击右边的箭头进入下一张图片！）

我们遇到的最大问题（以及当时帮助我的老师）是遍历我的 SVG 集合 - 单击 SVG 会导致将新图像和新 svg 加载到主页中。我们使用的解决方案是指向一个包含 SVG 路径的数组 并通过使用

操纵 DOM 来杀死旧的 SVG

  event.target.parentNode.parentNode.remove()

我们认为这可能不是最佳解决方案，尤其是因为它不允许在 svg 之间平滑过渡。

是否有一种方法可以使用加载方法在我的 SVG 之间实现平滑过渡（例如，淡入淡出）？

感谢您的见解。

    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

我会用 CSS class 来完成。将删除元素的行从 DOM 更改为：

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

然后在您的 CSS 元素中添加：

opacity: 1;
transition: opacity 1.5s;

并为淡出添加新样式：

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

使用 SNAP.SVG 平滑加载 SVG

Smooth loading of SVGs using SNAP.SVG

javascript

css

svg

snap.svg