单个SVG中是否可以同时使用线性渐变与径向渐变两种效果

单个SVG元素只能指定一个fill属性，无法同时应用两种渐变，采用多层同形状路径叠加的方式即可实现需求，无需额外交互：

1. 底层路径保留原有线性渐变，用于展示水位高度
2. 顶层叠加一个完全相同的水滴路径，填充半透明的径向渐变实现3D高光效果，不会遮挡下层水位
3. 调整径向渐变的透明度参数，保证叠加后水位展示清晰，3D光效自然

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .tear {
      stroke: black;
      stroke-width: 0.4px;
      transform-origin: top center;
    }
    /* 顶层高光路径不需要额外描边，避免重影 */
    .tear-highlight {
      transform-origin: top center;
      stroke: none;
    }
  </style>
</head>
<body>
  <div class="box">
    <svg width="10%" viewbox="0 0 50 42">
      <defs>
        <!-- 水位线性渐变，修改offset值即可调整水位高度 -->
        <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>
        <!-- 半透明3D高光径向渐变 -->
        <radialGradient id="dropGradient" gradientTransform="rotate(-20)">
          <stop offset="10%" stop-color="white" stop-opacity="0.7" />
          <stop offset="95%" stop-color="blue" stop-opacity="0" />
        </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)"/>
      <!-- 顶层：3D高光叠加层 -->
      <path class="tear-highlight"
            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)"/>
    </svg>
  </div>
  <b>Water tank 50% Full</b>
</body>
</html>

后续调整说明 #

• 如需修改水位，仅需调整linearGradient中两个stop的offset值即可，例如水位80%可设置为offset="78%"和offset="80%"
• 如需调整3D效果强度，可修改radialGradient中stop的stop-opacity数值，数值越高光效越明显

内容的提问来源于stack exchange，提问作者Idontwant Totell