有没有办法在单个 svg 中包含 2 个渐变（线性和径向）？

Question

我正在尝试制作一个水滴 svg 来显示水箱中的水位。我用线性渐变来做这个，所以我可以图形化地（很容易地）显示水是半满还是满等。在这个例子中，我显示水箱是半满的。我想为水滴添加 3D 效果，并找到了一种使用径向渐变的方法，但无法找到一种方法将两个渐变同时加载到同一个 svg 图像，如果不是的话可能有人知道他们将如何做下面的事情吗？我不希望在我的示例中单击此处，它只显示我尝试添加到半满液滴的 3D 外观。

有没有办法在页面加载时在单个 svg 图像上同时使用两种渐变？

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

Answer 1

现在两种渐变的蓝色相同，您可以使用线性渐变作为水滴上的蒙版。面具由 <rect> 和水滴 <path> 本身制成。是这样的吗？

这会阻止您的点击事件，但我想您可以解决这个问题:-)

更新：我把线性渐变的一部分做成了深灰色（#444），这样径向渐变就可以在水滴的“空”部分看到了。

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

有没有办法在单个 svg 中包含 2 个渐变（线性和径向）？

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

svg

gradient