【问题标题】：SVG wave not stretching to 100% width in SafariSVG 波在 Safari 中未拉伸到 100% 宽度
【发布时间】：2020-12-28 22:27:17
【问题描述】：

我的 SVG 在 Safari 中没有像在 IE、Chrome 和 Firefox 中那样缩放到 100% 宽度。我尝试了很多，但无法像在所有其他浏览器中一样让我的 SVG 扩展到 100% 宽度。我正在使用 React。

.hero-svg {
  display: flex;
  width: 100%;
}

svg {
  display: flex;
  width: 100%;
  z-index: -1;
}

<div className="hero-svg">
    <svg viewBox="0 0 1440 320">
        <path fill="#3dd0f2" fillOpacity="1" d="M0,128L80,117.3C160,107,320,85,480,117.3C640,149,800,235,960,229.3C1120,224,1280,128,1360,80L1440,32L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

我尝试使用preserveAspectRatio = "none"，但变化不大。

这是 Chrome 和 Safari 的屏幕截图：

铬：

Safari：

【问题讨论】：

在我的 iPad 上使用 Safari (IOS 14) 可以正常拉伸。
您能否发布一个屏幕截图，说明您所说的 svg 在 Safari 中没有缩放到 100% 宽度。我刚刚在 Safar v14 中检查过，似乎没问题。
您正在使用className。你用反应吗？
是的，我正在使用 react，我刚刚上传了一个截图
z-index 在没有位置的情况下将无法工作，尝试添加 svg 命名空间并删除 display:flex

标签： html css svg

【解决方案1】：

我想通了。这有效：

<div className="hero-svg">
    <svg  viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
        <path fill="#f0f0f0" fillOpacity="1" d="M0,32L80,32C160,32,320,32,480,37.3C640,43,800,53,960,80C1120,107,1280,149,1360,170.7L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

css:

.hero-svg{
  display: flex; 
  width: 100%;

  svg{
    width: 100%;
    z-index: -1;
  }
}

【讨论】：