bewegen Wasser basierend auf dem Benutzer eingegebenen Wert

Question

Ich habe eine Svg Wasserbehälter. Das Konzept ist, dass der Benutzer die minimale und maximale Reichweite für das Wasserfahrzeug bereitstellt. Wenn es auf Min-Niveau erreicht, sollte die Farbe des Wasserstandes rot angezeigt werden, was ich tun könnte, aber wie kann ich den Wert gemäß dem vom Benutzer gegebenen Wert ändern. Die obere Ebene ist der maximale Teil und die untere Ebene ist der minimale Teil.

Das Wegelement machte es mir schwer, den Wasserstand zu ändern. Ich weiß, dass das d-Attribut des Pfades geändert werden sollte, aber wie das d-Attribut mit dem Benutzerwert angepasst wird.

<script> 
     const MIN = 0; 
     const MAX = 100; 
     // if it is near to minimum, color should be change to Red 
     var svg = Snap('#svg'); 
     const s = Snap('#waterLevel'); 
     const path = Snap('#path-3'); 
     document.getElementById('inputValue').addEventListener('change', function(event){ 
     path.attr({ 
      d: `M140.79,105 L${event.target.value}` 
     }); 
     if (event.target.value === "50") { 
     console.log('yes'); 
     s.attr({ 
      fill: 'red' 
     }); 
     } 
     }) 
    </script> 

Hier ist die aktualisierte jsbin Beispiel mit translate (0,0) verwendet

http://jsbin.com/pocicozini/1/edit?html,output

Answer 1

Anstatt die Form des Pfades zu ändern, würde ich einen alternativen Ansatz zu nehmen versucht sein. Sie können einen clipPath verwenden, der die Flüssigkeit klemmt und die Höhe des Clips ändert.

Der Kern des Codes würde wie folgt aussehen ..

document.getElementById('inputValue').addEventListener('change', function(event){ 

    Snap.animate(200-Snap.select("#rectclip").attr('y'),event.target.value, 
     function(val) { 
     Snap.select("#rectclip").attr({ y: 200 - val }); 
     }, 50); 
}); 

So legen wir rect über die Flüssigkeit und den y-Wert einstellen, so dass es, wie viel von der Flüssigkeit ändert Pfad ist abgeschnitten.

jsbin