如何使用css和javascript创建泪滴/水滴填充[重复]

Posted 2023-03-06

【中文标题】如何使用css和javascript创建泪滴/水滴填充[重复]

【英文标题】：How to create a teardrop/water drop filling using css and javascript [duplicate]

【发布时间】：2020-06-01 23:33:07

【问题描述】：

如何使用css和javascript动态填充水创建泪滴/水滴填充。

例如。

它将填充水/泪滴取决于百分比。

例如，当百分比为 100% 时，它将充满水/泪滴。

【问题讨论】：

考虑改用 SVG，它会容易得多。您可以只为液滴设置一个<path>，为条设置一个<mask> 或<clipPath>。

普通的旧 CSS/Javascript 在这种类型的问题上表现不佳 - 它并不是真正适合不规则形状的对象。有一些技巧，但泪滴形状太难了。因此，您可以采用以下两种方式之一 - 动态生成 SVG，或者如果您不需要高精度的图形，只需为各种级别的水滴制作 n 幅图像。对于这类事情来说，这通常已经足够了，但这取决于用例。

【参考方案1】：

解决问题的最佳方法是使用 SVG 图形，因此可以动态创建它

<div class="box">
<svg  viewbox="0 0 50 42">
  <path class="tear"
        d="M15 6
           Q 15 6, 25 18
           A 12.8 12.8 0 1 1 5 18
           Q 15 6 15 6z" />
</svg>
  </div>

接下来您要查看的是使用基于

的颜色填充路径

.tear 
  fill: red;
  stroke: black;
  stroke-width: 2PX;
 
  transform-origin: top center;

    <div class="box">
    <svg  viewbox="0 0 50 42">
      <path class="tear"
            d="M15 6
               Q 15 6, 25 18
               A 12.8 12.8 0 1 1 5 18
               Q 15 6 15 6z" />
    </svg>
      </div>

最后一步是创建一个渐变并用 JS 操作渐变的开始和结束位置

//change gradient 

function change()

let tear = document.getElementById('tear');
tear.setAttribute("fill","url(#grad2)");




var click1 =document.getElementById('clickMe');
click1.addEventListener("click",change);

.tear 
  
  stroke: black;
  stroke-width: 2PX;
 
  transform-origin: top center;

<div id='clickMe'> Click here !</div>

 <div class="box">
<svg  viewbox="0 0 50 42">
<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
      <stop offset="60%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
    
     <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="20%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
      <stop offset="30%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>

  <path id="tear" class="tear"
        d="M15 6
           Q 15 6, 25 18
           A 12.8 12.8 0 1 1 5 18
           Q 15 6 15 6z" fill="url(#grad1)"/>
</svg>
  </div>

在网络上的其他示例中，这些人试图覆盖另一条路径，但对于最简单的方法，只需在 svg 和一些 JS 中使用几个渐变

我相信这对你有帮助