javascript - 如何使用 css 和 javascript 创建泪滴/水滴填充

Question

这个问题已经有答案了:

How do I create a teardrop in HTML? (11 个回答)

已关闭 3 年前。

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

例如。

它会填充水/泪滴，具体取决于百分比。

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

Answer 1

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

<div class="box">
<svg width="100%" 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 width="100%" 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 width="100%" 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 中使用几个渐变

我相信这对你有帮助