有没有办法在单个 svg 中包含 2 个渐变（线性和径向）？ [已回答/已解决]答案

【问题标题】：Is there a way to include 2 gradients (linear & radial) in single svg? [Answered/Solved]有没有办法在单个 svg 中包含 2 个渐变（线性和径向）？ [已回答/已解决]
【发布时间】：2026-01-24 15:15:02
【问题描述】：

我正在尝试制作一个水滴 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>

【问题讨论】：

标签： svg gradient

【解决方案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>

【讨论】：