如何实现带全屏渐变的平铺SVG背景？集群渲染问题求解

问题 #

是否可以实现带有全屏渐变的平铺SVG背景？

单个SVG瓦片示例 #

对应的SVG代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg id="circleLayer" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 128 128" preserveAspectRatio="xMidYMid meet">
  <defs>
    <style>
      .st0 {
        fill: #6887b5;
      }

      .st1 {
        fill: #b2b2b2;
      }
    </style>
  </defs>
  <g id="circle">
    <path class="st1" d="M64,108c-24.262,0-44-19.738-44-44s19.738-44,44-44,44,19.738,44,44-19.738,44-44,44Z"/>
    <path class="st0" d="M64,24c22.056,0,40,17.944,40,40s-17.944,40-40,40-40-17.944-40-40,17.944-40,40-40M64,16c-26.51,0-48,21.49-48,48s21.49,48,48,48,48-21.49,48-48-21.49-48-48-48h0Z"/>
  </g>
</svg>

径向渐变SVG示例 #

<?xml version="1.0" encoding="UTF-8"?>
<svg id="gradLayer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
  <defs>
    <style>
      .st0 {
        fill: url(#radial-gradient);
      }
    </style>
    <radialGradient id="radial-gradient" cx="262.914" cy="248.437" fx="262.914" fy="248.437" r="347.618" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="1" stop-color="#000"/>
    </radialGradient>
  </defs>
  <g id="gradRect">
    <rect class="st0" x="0" y="0" width="512" height="512"/>
  </g>
</svg>

期望效果 #

我们想要实现的是所有平铺的圆形共享同一个全屏径向渐变，效果如下：

需要说明的是，直接把圆形设为透明，在下方加全屏渐变的方案不可行——因为圆形背景本身带有透明区域（圆形周围部分），这样会让渐变直接透出来，达不到只让渐变填充圆形内部的效果。我猜测可能通过内联CSS实现，但外部CSS不行，需要详细解答。

更新：尝试方案及问题 #

我试过一种方案，但渲染结果不符合预期。

使用的HTML代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SVG - Tile + Full Screen Gradient Test</title>
  <style type="text/css">
    body.svg-bg {
      background-image: url(tile-and-full-02.svg);
      background-position: center;
      background-repeat: repeat;
    }
  </style>
</head>
<body class="svg-bg">
</body>
</html>

使用的SVG代码 #

<svg id="tile-and-full" xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" preserveAspectRatio="xMidYMid meet">
  <defs>
    <circle id="c1" r="10"/>
    <pattern id="p1" viewBox="0 0 30 30" width="20%" height="20%">
      <use href="#c1" fill="white" transform="translate(15 15)"/>
    </pattern>
    <pattern id="p2" viewBox="0 0 30 30" width="20%" height="20%">
      <use href="#c1" fill="none" stroke="#6786b4" stroke-width="2" transform="translate(15 15)"/>
    </pattern>
    <mask id="m1">
      <rect width="100" height="100" fill="url(#p1)"/>
    </mask>
    <radialGradient id="rg1" cx="50" cy="50" r="70" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="1" stop-color="#000"/>
    </radialGradient>
  </defs>
  <rect width="100" height="100" fill="url(#rg1)" mask="url(#m1)"/>
  <rect width="100" height="100" fill="url(#p2)"/>
</svg>

渲染问题 #

实际渲染结果是瓦片集群，即分组瓦片重复出现，效果如下：

看起来裁剪/遮罩计算是在平铺之前完成的，导致无法实现预期效果。现在想知道是否能同时实现平铺和裁剪/遮罩？是否需要用多层div？或者用CSS裁剪方案？我也试过feTile，但没成功。

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