Macbook上的Safari不支持linearGradient

Question

我有一个简单的SVG gradiant。它非常酷。但在Safari Mackbook上，它是黑白两色的。为什么呢？

这是我的代码：

<svg viewBox="0 0 1226 340" id="back-rainbow" version="1.1" preserveAspectRatio="none" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient x1="100%" y1="0%" x2="0%" y2="15%" id="back-rainbow-gradient">
          <stop stop-color="#8DC6D8" offset="12%"/>
          <stop stop-color="#CE97DF" offset="40%"/>
          <stop stop-color="#FFCF9F" offset="90%"/>
        </linearGradient>
      </defs>
      <path fill="url(#back-rainbow-gradient)" d="M1074 0C673.94.2 303.56 126 0 340h1226V6c-50.1-3.72-100.95-5.8-152-6z" />
    </svg>

    <svg viewBox="0 0 1031 475" id="front-rainbow" preserveAspectRatio="none">
      <defs>
        <linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient" >
          <stop stop-color="#00D7B9" offset="0%"/>
          <stop stop-color="#B95DD7" offset="50%"/>
          <stop stop-color="#FFB367" offset="100%"/>
        </linearGradient>
      </defs>
      <path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
        fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
    </svg>


    <svg viewBox="0 0 1280 110" preserveAspectRatio="none" id="header-curve">
      <path d="M1280 3.9V110H0C194 71.33 662-19.9 1280 3.9z" fill="#fff" />
    </svg>