Is there a way to include 2 gradients (linear & radial) in single svg?

I'm trying to make a waterdrop svg that shows what level the water is in a tank. I do this with a linear gradient, so I can display graphically (and easily) if the water is half or full, etc. In this example I show the tank is half full. I'd like to add a 3D affect to the water drop, and found a way to do it with a radial gradient but can't figure out a way to load both gradients at the same time to the same svg image and if that's not possible does someone have an idea how they'd do the below instead? I DO NOT want the Click here in my example it just shows the 3D appearance I'm trying to add to the half full droplet.

Is there a way I can have both gradients on the single svg image when the page loads?

<!DOCTYPE html>
<html>

<head>
  <style>
    .tear {
      stroke: black;
      stroke-width: 0.4px;
      transform-origin: top center;
    }
  </style>
</head>

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

  <div class="box">
    <svg width="10%" viewbox="0 0 50 42">
<defs>
    <linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="48%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </linearGradient>
    <radialGradient id="dropGradient" gradientTransform="rotate(-20)">
      <stop offset="10%" stop-color="white" />
      <stop offset="95%" stop-color="blue" />
    </radialGradient> 
  </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>
  <b>Water tank 50% Full</b>
</body>
<script>
  function change() {
    let tear = document.getElementById('tear');
    tear.setAttribute("fill", "url(#dropGradient)");
  }
  var click1 = document.getElementById('clickMe');
  click1.addEventListener("click", change);
</script>

</html>

Solution

Now the blue color is the same for both gradients you can use the linear gradient as a mask on the drop. The mask is made from a <rect> and the drop <path> itself. Is it something like that?

This brakes your click event, but I guess you can figure that out :-)

Update: I made part of the linear gradient dark gray (#444) so that the radial gradient can be seen in the "empty" part of the drop.

<!DOCTYPE html>
<html>
<head>
<style>
.tear {  
  stroke: black;
  stroke-width: .4px;
 
  transform-origin: top center;
}
</style>
</head>
<body>
<div id='clickMe'> Click here !</div>

<div class="box">
<svg width="10%" viewbox="0 0 50 42">
<defs>
    <linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="48%" style="stop-color:white;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#444;stop-opacity:1" />
    </linearGradient>
    <radialGradient id="dropGradient" gradientTransform="rotate(-20)">
      <stop offset="10%" stop-color="white" />
      <stop offset="95%" stop-color="blue" />
    </radialGradient>
    <mask id="m1">
      <rect x="0" y="0" width="100%" height="100%" fill="white"/>
      <path
        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)"/>
    </mask>
  </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(#dropGradient)" mask="url(#m1)"/>
</svg>
</div>
<b>Water tank 50% Full</b>
</body>
<script>
function change()
{
let tear = document.getElementById('tear');
tear.setAttribute("fill","url(#dropGradient)");
}
var click1 =document.getElementById('clickMe');
click1.addEventListener("click",change);
</script>
</html>