我有一个简单的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>