Safari 不显示 svg

Answer 1

正如 Robert 在评论中所说，SVG 有一个奇怪的重复项。看起来你复制粘贴了同一个SVG中的一些行

清理了SVG；对我来说在 FireFox 中运行得很好：

<style>
  svg {
    height: 160px
  }
</style>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop>
      <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop>
    </linearGradient>
  </defs>
  <path fill="url(#gradient)">
    <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values="
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z;
M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z;
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z">
    </animate>
  </path>
</svg>`