SVG中clipPath、pattern与linearGradient的组合实现问询

我来帮你实现这个渐变圆点背景的效果，你的思路（用线性渐变填充后通过pattern裁剪）完全没问题，下面是完整的可运行方案，我会一步步拆解逻辑：

核心思路拆解 #

• 先定义水平线性渐变：从左到右，颜色从绿色过渡到黄色
• 再定义重复图案（pattern）：用单个小圆作为重复单元，确保背景能铺满圆点
• 最后将渐变填充到图案中，再把图案应用到整个画布的矩形上

完整代码示例 #

<svg width='100%' height='100%' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义从左到右的绿黄线性渐变 -->
    <linearGradient id="dotGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#2ecc71" />
      <stop offset="100%" stop-color="#f1c40f" />
    </linearGradient>
    
    <!-- 定义重复的圆点图案 -->
    <pattern id="dotPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="4" fill="url(#dotGradient)" />
    </pattern>
  </defs>
  
  <!-- 用图案填充整个画布 -->
  <rect width="100" height="100" fill="url(#dotPattern)" />
</svg>

代码细节调整说明 #

• 把SVG的宽高设为100%可以让它自适应容器大小，也可以替换成固定数值（比如500）
• 渐变的x1/x2设为0%/100%保证是纯水平方向的颜色过渡，若要调整渐变角度可修改这两个值
• Pattern的width和height控制圆点的间距，r控制圆点大小，你可以根据需求自由调整这些参数

这样就能得到你想要的：从左到右绿色渐变到黄色的圆点背景啦～

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