Klasse zum SVG-Pfad hinzufügen

Question

Ich versuche, eine neue Klasse zum SVG-Pfadelement hinzuzufügen, da ich nur möchte, dass es eine Startanimation ist, wenn sie im Ansichtsfenster angezeigt wird. Es schien jedoch nicht zu funktionieren. Ich habe versucht mit $("#item").attr("class", "oldclass newclass");, aber es scheint nicht so gut zu funktionieren. Bitte hilf mir! Vielen Dank!

//window and animation items 
 
    var st7 = $.find('.st7'); 
 
    var web_window = $(window); 
 
    
 
    //check to see if any animation containers are currently in view 
 
    function check_if_in_view() { 
 
     //get current window information 
 
     var window_height = web_window.height(); 
 
     var window_top_position = web_window.scrollTop(); 
 
     var window_bottom_position = (window_top_position + window_height); 
 
    
 
     //iterate through elements to see if its in view 
 
     $.each(st7, function() { 
 
      //get the element sinformation 
 
      var element = $(this); 
 
      var element_height = $(element).outerHeight(); 
 
      var element_top_position = $(element).offset().top; 
 
      var element_bottom_position = (element_top_position + element_height); 
 
    
 
      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport) 
 
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { 
 
       element.setAttribute("class", "triggeredCSS3"); 
 
      } else { 
 
       element.removeClass('in-view'); 
 
      } 
 
     }); 
 
    } 
 
    
 
     //on or scroll, detect elements in view 
 
    $(window).on('scroll resize', function() { 
 
     check_if_in_view() 
 
    }) 
 
    
 
    //trigger our scroll event on initial load 
 
    $(window).trigger('scroll');

.st7 { 
 
     fill: none; 
 
     stroke: #fff; 
 
     stroke-miterlimit: 10; 
 
     stroke-dasharray: 5000; 
 
     stroke-dashoffset: 5000; 
 
     /*animation: draw1 8s linear forwards;*/ 
 
     stroke-width: 4; 
 
    } 
 
    
 
    .st7.triggeredCSS3 { 
 
     animation: draw1 8s linear forwards; 
 
    } 
 
     
 
    @keyframes draw1{ 
 
     to { 
 
      stroke-dashoffset: 0; 
 
     } 
 
    } 
 
    @keyframes draw2{ 
 
     to { 
 
      stroke-dashoffset: 0; 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg class="line-drawing" width="110%" height="700" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"> 
 
    <path d="m 119.21227,317.3823" class="st7"/>

Answer 1

Es gibt eine separate Funktion für Klassen hinzufügen und das ist .addClass().

Dies ermöglicht es uns, nicht jedes Mal die Hektik "oldclass newclass" zu haben.

Verwenden $("#item").addClass("newclass");

Keine Fehler für mich:

//window and animation items 
 
    var st7 = $.find('.st7'); 
 
    var web_window = $(window); 
 
    
 
    //check to see if any animation containers are currently in view 
 
    function check_if_in_view() { 
 
     //get current window information 
 
     var window_height = web_window.height(); 
 
     var window_top_position = web_window.scrollTop(); 
 
     var window_bottom_position = (window_top_position + window_height); 
 
    
 
     //iterate through elements to see if its in view 
 
     $.each(st7, function() { 
 
      //get the element sinformation 
 
      var element = $(this); 
 
      var element_height = $(element).outerHeight(); 
 
      var element_top_position = $(element).offset().top; 
 
      var element_bottom_position = (element_top_position + element_height); 
 
    
 
      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport) 
 
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { 
 
       element.addClass("triggeredCSS3"); 
 
      } else { 
 
       element.removeClass('in-view'); 
 
      } 
 
     }); 
 
    } 
 
    
 
     //on or scroll, detect elements in view 
 
    $(window).on('scroll resize', function() { 
 
     check_if_in_view() 
 
    }) 
 
    
 
    //trigger our scroll event on initial load 
 
    $(window).trigger('scroll');

.st7 { 
 
     fill: none; 
 
     stroke: #fff; 
 
     stroke-miterlimit: 10; 
 
     stroke-dasharray: 5000; 
 
     stroke-dashoffset: 5000; 
 
     /*animation: draw1 8s linear forwards;*/ 
 
     stroke-width: 4; 
 
    } 
 
    
 
    .st7.triggeredCSS3 { 
 
     animation: draw1 8s linear forwards; 
 
    } 
 
     
 
    @keyframes draw1{ 
 
     to { 
 
      stroke-dashoffset: 0; 
 
     } 
 
    } 
 
    @keyframes draw2{ 
 
     to { 
 
      stroke-dashoffset: 0; 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg class="line-drawing" width="110%" height="700" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"> 
 
    <path d="m 119.21227,317.3823" class="st7"/>