如何让包含4个重叠椭圆的SVG在移动端实现响应式？

嘿，我来帮你搞定这个响应式SVG的问题！先看看你现有代码里的几个小问题，然后一步步把它改成适配各种屏幕的版本～

先说说原代码的坑 #

1. 重复定义渐变ID：你把#grad1重复定义了4次，SVG里ID是唯一标识，重复定义会导致渐变无法正确应用，而且完全没必要，只需要定义一次就够了。
2. 固定像素位置：椭圆的cx用了固定值（125、300这些），小屏幕下容器变窄，这些固定位置的椭圆会挤在一起甚至超出容器，自然没法良好响应。

核心解决方案：用viewBox实现响应式缩放 #

viewBox是SVG实现响应式的关键，它定义了SVG的坐标系统范围，让SVG能根据容器大小按比例缩放。下面是修改后的完整代码：

<div class="row">
  <div class="col-md-12">
    <svg width="100%" height="auto" viewBox="0 0 745 220" preserveAspectRatio="xMidYMid meet">
      <!-- 只定义一次渐变 -->
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        </radialGradient>
      </defs>
      <!-- 保留原椭圆的位置，靠viewBox自动缩放 -->
      <ellipse cx="125" cy="110" rx="95" ry="85" fill="url(#grad1)" />
      <ellipse cx="300" cy="110" rx="95" ry="85" fill="url(#grad1)" />
      <ellipse cx="475" cy="110" rx="95" ry="85" fill="url(#grad1)" />
      <ellipse cx="650" cy="110" rx="95" ry="85" fill="url(#grad1)" />
    </svg>
  </div>
</div>

关键修改点解释 #

• viewBox="0 0 745 220"：这里0 0是SVG内容的左上角坐标，745是内容的总宽度（最右侧椭圆的cx=650加上它的rx=95，刚好覆盖所有内容），220是原SVG的高度。有了这个，SVG就知道自己的内容范围，能按比例缩放了。
• preserveAspectRatio="xMidYMid meet"：确保SVG缩放时保持宽高比，并且居中显示，不会拉伸变形。meet表示整个SVG内容会完整显示，不会被裁剪；如果需要填满容器可以用slice，但这里meet更适合你的场景。
• width="100%" + height="auto"：让SVG宽度填满父容器，高度自动按viewBox的比例计算，保证椭圆形状不变。
• 删除重复的渐变定义：只保留一个#grad1，确保渐变能正常应用到所有椭圆。

进阶优化：小屏幕下调整椭圆间距 #

如果觉得小屏幕下椭圆还是太挤，可以用CSS媒体查询微调位置，比如：

@media (max-width: 768px) {
  /* 调整第二个和第三个椭圆的位置，缩小间距 */
  svg ellipse:nth-child(2) {
    transform: translateX(-25px);
  }
  svg ellipse:nth-child(3) {
    transform: translateX(25px);
  }
}

或者更彻底的，把椭圆的坐标改成百分比，让它们始终均匀分布：

<ellipse cx="20%" cy="50%" rx="15%" ry="38.6%" fill="url(#grad1)" />
<ellipse cx="40%" cy="50%" rx="15%" ry="38.6%" fill="url(#grad1)" />
<ellipse cx="60%" cy="50%" rx="15%" ry="38.6%" fill="url(#grad1)" />
<ellipse cx="80%" cy="50%" rx="15%" ry="38.6%" fill="url(#grad1)" />

这里ry=38.6%是因为原ry=85除以原高度220得到的比例，这样能保持椭圆的原始形状。

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