根据用户输入的值移动水

Question

我有一个svg的水容器。概念是用户将为水容器提供最小和最大范围。如果它达到最小级别，水位的颜色应该显示为红色，我可以这样做，但我如何才能根据用户给定的值更改该值。上层是最大部分，下层是最小部分。

path元素使我很难改变水位。我知道path的d属性应该更改，但是如何根据用户值调整d属性。

    <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>

下面是使用translate(0,0)的更新后的jsbin示例

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

Answer 1

与其改变路径的形状，不如采用另一种方法。您可以使用clipPath来剪辑液体，并更改剪辑的高度。

代码的核心将如下所示。

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 );
});   

因此，我们在液体上放置一个矩形，并调整y值，使其改变多少液体路径被裁剪。

jsbin