我下面有这个 svg，它在桌面和 Android 上运行得很好，但是在 safari 上甚至没有尝试显示，我不知道如何修复它，我知道当我删除它时 svg 显示它的掩码 bc 的问题，但就像一个大矩形而不是斑点。我已经定义了一个视图框、高度和宽度。我真的不知道 Safari 不喜欢什么，喜欢戴面具，但我真的很希望它能开始工作
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
viewBox="0 0 1920 1440"
xmlns="http://www.w3.org/2000/svg"
xmlns:Xlink="http://www.w3.org/1999/xlink"
width="100%"
id="blobSvg"
>
<defs>
<filter id="goo">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="10"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo"
/>
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<linearGradient
gradientTransform="rotate(150, 0.5, 0.5)"
x1="50%"
y1="0%"
x2="50%"
y2="100%"
id="gradient"
>
<stop
stop-color="hsl(315, 100%, 72%)"
stop-opacity="1"
offset="0%"
></stop>
<stop
stop-color="hsl(227, 100%, 50%)"
stop-opacity="1"
offset="100%"
></stop>
</linearGradient>
</defs>
<mask id="maska">
<path fill="white" transform="translate(2000 800) scale(1.5 1.7)">
<animate
attributeName="d"
dur="15000ms"
repeatCount="indefinite"
values="
M439,319.5Q389,389,319.5,426.5Q250,464,193.5,413.5Q137,363,86.5,306.5Q36,250,68,175Q100,100,175,89Q250,78,330.5,83.5Q411,89,450,169.5Q489,250,439,319.5Z;
M435,328.5Q407,407,328.5,407.5Q250,408,190,389Q130,370,72,310Q14,250,71,189Q128,128,189,94Q250,60,338,67Q426,74,444.5,162Q463,250,435,328.5Z;
M407,327.5Q405,405,327.5,403Q250,401,190.5,385Q131,369,101.5,309.5Q72,250,87.5,176.5Q103,103,176.5,52Q250,1,314,61.5Q378,122,393.5,186Q409,250,407,327.5Z;
M439,319.5Q389,389,319.5,426.5Q250,464,193.5,413.5Q137,363,86.5,306.5Q36,250,68,175Q100,100,175,89Q250,78,330.5,83.5Q411,89,450,169.5Q489,250,439,319.5Z;
"
></animate>
</path>
<g transform="translate(1300 200)" >
<path class="blobAnimate1" fill="white">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M420.84958,302.55114Q355.10228,355.10228,302.55114,420.44946Q250,485.79664,168.97563,448.92269Q87.95126,412.04874,76.04994,331.02437Q64.14862,250,86.32521,179.2509Q108.5018,108.5018,179.2509,52.92809Q250,-2.64562,313.02557,60.65162Q376.05114,123.94886,431.32401,186.97443Q486.59688,250,420.84958,302.55114Z;
M415.04469,326.54163Q403.08327,403.08327,326.54163,440.62559Q250,478.16791,183.60267,430.48128Q117.20535,382.79465,91.12181,316.39733Q65.03827,250,75.3604,167.84126Q85.68253,85.68253,167.84126,55.7063Q250,25.73007,309.48087,78.38416Q368.96175,131.03825,397.98393,190.51913Q427.00611,250,415.04469,326.54163Z;
M417.5,336.5Q423,423,336.5,442Q250,461,194,411.5Q138,362,76.5,306Q15,250,68.5,186Q122,122,186,110.5Q250,99,336.5,88Q423,77,417.5,163.5Q412,250,417.5,336.5Z;
M420.84958,302.55114Q355.10228,355.10228,302.55114,420.44946Q250,485.79664,168.97563,448.92269Q87.95126,412.04874,76.04994,331.02437Q64.14862,250,86.32521,179.2509Q108.5018,108.5018,179.2509,52.92809Q250,-2.64562,313.02557,60.65162Q376.05114,123.94886,431.32401,186.97443Q486.59688,250,420.84958,302.55114Z;
"
></animate>
</path>
</g>
<path fill="white" transform="translate(1750 150) scale(2)">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M432.82552,332.11494Q414.22989,414.22989,332.11494,429.89714Q250,445.5644,194.30733,403.47487Q138.61465,361.38535,73.21421,305.69267Q7.81377,250,67.03547,188.12859Q126.25717,126.25717,188.12859,88.15313Q250,50.04909,318.98373,81.04081Q387.96747,112.03253,419.69431,181.01627Q451.42116,250,432.82552,332.11494Z;
M406.5,328Q406,406,328,406.5Q250,407,174,404.5Q98,402,78.5,326Q59,250,96,191.5Q133,133,191.5,88.5Q250,44,338,59Q426,74,416.5,162Q407,250,406.5,328Z;
M400,324.5Q399,399,324.5,442.5Q250,486,192,426Q134,366,111,308Q88,250,105,186Q122,122,186,102.5Q250,83,336,80.5Q422,78,411.5,164Q401,250,400,324.5Z;
M432.82552,332.11494Q414.22989,414.22989,332.11494,429.89714Q250,445.5644,194.30733,403.47487Q138.61465,361.38535,73.21421,305.69267Q7.81377,250,67.03547,188.12859Q126.25717,126.25717,188.12859,88.15313Q250,50.04909,318.98373,81.04081Q387.96747,112.03253,419.69431,181.01627Q451.42116,250,432.82552,332.11494Z;
"
></animate>
</path>
<g transform="translate(-100 400) scale(1.8 2.3)">
<path fill="white" class="blobAnimate2">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z;
M411,328.5Q407,407,328.5,436Q250,465,162.5,445Q75,425,70.5,337.5Q66,250,71.5,163.5Q77,77,163.5,40.5Q250,4,311,66Q372,128,393.5,189Q415,250,411,328.5Z;
M415.5,307.5Q365,365,307.5,419Q250,473,190,421.5Q130,370,100,310Q70,250,99.5,189.5Q129,129,189.5,96Q250,63,305,101.5Q360,140,413,195Q466,250,415.5,307.5Z;
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z;
"
></animate>
</path>
</g>
<path fill="white" transform="translate(-100 1000) scale(2 1.2)">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z;
M411,328.5Q407,407,328.5,436Q250,465,162.5,445Q75,425,70.5,337.5Q66,250,71.5,163.5Q77,77,163.5,40.5Q250,4,311,66Q372,128,393.5,189Q415,250,411,328.5Z;
M415.5,307.5Q365,365,307.5,419Q250,473,190,421.5Q130,370,100,310Q70,250,99.5,189.5Q129,129,189.5,96Q250,63,305,101.5Q360,140,413,195Q466,250,415.5,307.5Z;
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z;
"
></animate>
</path>
<g transform="translate(600 570) scale(1.6)">
<path fill="white" class="blobAnimate3">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M417,338.5Q427,427,338.5,428Q250,429,179,410.5Q108,392,59,321Q10,250,48,168Q86,86,168,90.5Q250,95,309.5,113Q369,131,388,190.5Q407,250,417,338.5Z;
M424,305Q360,360,305,385.5Q250,411,190.5,390Q131,369,103.5,309.5Q76,250,109,196Q142,142,196,88.5Q250,35,325.5,67Q401,99,444.5,174.5Q488,250,424,305Z;
M427.5,330Q410,410,330,420.5Q250,431,196.5,394Q143,357,82,303.5Q21,250,47.5,162Q74,74,162,54.5Q250,35,306.5,86Q363,137,404,193.5Q445,250,427.5,330Z;
M444.5,335.5Q421,421,335.5,458Q250,495,171.5,451Q93,407,95,328.5Q97,250,85,161.5Q73,73,161.5,61.5Q250,50,304.5,95.5Q359,141,413.5,195.5Q468,250,444.5,335.5Z;
M417,338.5Q427,427,338.5,428Q250,429,179,410.5Q108,392,59,321Q10,250,48,168Q86,86,168,90.5Q250,95,309.5,113Q369,131,388,190.5Q407,250,417,338.5Z;
"
></animate>
</path>
</g>
</mask>
<rect
x="0"
y="0"
mask="url(#maska)"
fill="url(#gradient)"
width="3060"
height="2040"
transform="translate(-400 -200)"
></rect>
</svg>问题是动画值字符串中路径最后一部分末尾的分号 (;)。
其他一些浏览器似乎可以容忍这一点，但 Safari 不能。
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 1920 1440" xmlns="http://www.w3.org/2000/svg" xmlns:Xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
<defs>
<filter id="goo">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="10"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo"
/>
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<linearGradient
gradientTransform="rotate(150, 0.5, 0.5)"
x1="50%"
y1="0%"
x2="50%"
y2="100%"
id="gradient"
>
<stop
stop-color="hsl(315, 100%, 72%)"
stop-opacity="1"
offset="0%"
></stop>
<stop
stop-color="hsl(227, 100%, 50%)"
stop-opacity="1"
offset="100%"
></stop>
</linearGradient>
</defs>
<mask id="maska">
<path fill="white" transform="translate(2000 800) scale(1.5 1.7)">
<animate
attributeName="d"
dur="15000ms"
repeatCount="indefinite"
values="
M439,319.5Q389,389,319.5,426.5Q250,464,193.5,413.5Q137,363,86.5,306.5Q36,250,68,175Q100,100,175,89Q250,78,330.5,83.5Q411,89,450,169.5Q489,250,439,319.5Z;
M435,328.5Q407,407,328.5,407.5Q250,408,190,389Q130,370,72,310Q14,250,71,189Q128,128,189,94Q250,60,338,67Q426,74,444.5,162Q463,250,435,328.5Z;
M407,327.5Q405,405,327.5,403Q250,401,190.5,385Q131,369,101.5,309.5Q72,250,87.5,176.5Q103,103,176.5,52Q250,1,314,61.5Q378,122,393.5,186Q409,250,407,327.5Z;
M439,319.5Q389,389,319.5,426.5Q250,464,193.5,413.5Q137,363,86.5,306.5Q36,250,68,175Q100,100,175,89Q250,78,330.5,83.5Q411,89,450,169.5Q489,250,439,319.5Z
"
></animate>
</path>
<g transform="translate(1300 200)" >
<path class="blobAnimate1" fill="white">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M420.84958,302.55114Q355.10228,355.10228,302.55114,420.44946Q250,485.79664,168.97563,448.92269Q87.95126,412.04874,76.04994,331.02437Q64.14862,250,86.32521,179.2509Q108.5018,108.5018,179.2509,52.92809Q250,-2.64562,313.02557,60.65162Q376.05114,123.94886,431.32401,186.97443Q486.59688,250,420.84958,302.55114Z;
M415.04469,326.54163Q403.08327,403.08327,326.54163,440.62559Q250,478.16791,183.60267,430.48128Q117.20535,382.79465,91.12181,316.39733Q65.03827,250,75.3604,167.84126Q85.68253,85.68253,167.84126,55.7063Q250,25.73007,309.48087,78.38416Q368.96175,131.03825,397.98393,190.51913Q427.00611,250,415.04469,326.54163Z;
M417.5,336.5Q423,423,336.5,442Q250,461,194,411.5Q138,362,76.5,306Q15,250,68.5,186Q122,122,186,110.5Q250,99,336.5,88Q423,77,417.5,163.5Q412,250,417.5,336.5Z;
M420.84958,302.55114Q355.10228,355.10228,302.55114,420.44946Q250,485.79664,168.97563,448.92269Q87.95126,412.04874,76.04994,331.02437Q64.14862,250,86.32521,179.2509Q108.5018,108.5018,179.2509,52.92809Q250,-2.64562,313.02557,60.65162Q376.05114,123.94886,431.32401,186.97443Q486.59688,250,420.84958,302.55114Z
"
></animate>
</path>
</g>
<path fill="white" transform="translate(1750 150) scale(2)">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M432.82552,332.11494Q414.22989,414.22989,332.11494,429.89714Q250,445.5644,194.30733,403.47487Q138.61465,361.38535,73.21421,305.69267Q7.81377,250,67.03547,188.12859Q126.25717,126.25717,188.12859,88.15313Q250,50.04909,318.98373,81.04081Q387.96747,112.03253,419.69431,181.01627Q451.42116,250,432.82552,332.11494Z;
M406.5,328Q406,406,328,406.5Q250,407,174,404.5Q98,402,78.5,326Q59,250,96,191.5Q133,133,191.5,88.5Q250,44,338,59Q426,74,416.5,162Q407,250,406.5,328Z;
M400,324.5Q399,399,324.5,442.5Q250,486,192,426Q134,366,111,308Q88,250,105,186Q122,122,186,102.5Q250,83,336,80.5Q422,78,411.5,164Q401,250,400,324.5Z;
M432.82552,332.11494Q414.22989,414.22989,332.11494,429.89714Q250,445.5644,194.30733,403.47487Q138.61465,361.38535,73.21421,305.69267Q7.81377,250,67.03547,188.12859Q126.25717,126.25717,188.12859,88.15313Q250,50.04909,318.98373,81.04081Q387.96747,112.03253,419.69431,181.01627Q451.42116,250,432.82552,332.11494Z
"
></animate>
</path>
<g transform="translate(-100 400) scale(1.8 2.3)">
<path fill="white" class="blobAnimate2">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z;
M411,328.5Q407,407,328.5,436Q250,465,162.5,445Q75,425,70.5,337.5Q66,250,71.5,163.5Q77,77,163.5,40.5Q250,4,311,66Q372,128,393.5,189Q415,250,411,328.5Z;
M415.5,307.5Q365,365,307.5,419Q250,473,190,421.5Q130,370,100,310Q70,250,99.5,189.5Q129,129,189.5,96Q250,63,305,101.5Q360,140,413,195Q466,250,415.5,307.5Z;
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z
"
></animate>
</path>
</g>
<path fill="white" transform="translate(-100 1000) scale(2 1.2)">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z;
M411,328.5Q407,407,328.5,436Q250,465,162.5,445Q75,425,70.5,337.5Q66,250,71.5,163.5Q77,77,163.5,40.5Q250,4,311,66Q372,128,393.5,189Q415,250,411,328.5Z;
M415.5,307.5Q365,365,307.5,419Q250,473,190,421.5Q130,370,100,310Q70,250,99.5,189.5Q129,129,189.5,96Q250,63,305,101.5Q360,140,413,195Q466,250,415.5,307.5Z;
M441.7244,320.53297Q391.06595,391.06595,320.53297,453.57349Q250,516.08104,192.1895,440.85102Q134.37901,365.62099,99.51621,307.8105Q64.65341,250,71.03631,163.7096Q77.41921,77.41921,163.7096,46.52016Q250,15.6211,313.02516,69.78539Q376.05032,123.94968,434.21659,186.97484Q492.38286,250,441.7244,320.53297Z
"
></animate>
</path>
<g transform="translate(600 570) scale(1.6)">
<path fill="white" class="blobAnimate3">
<animate
attributeName="d"
dur="10000ms"
repeatCount="indefinite"
values="
M417,338.5Q427,427,338.5,428Q250,429,179,410.5Q108,392,59,321Q10,250,48,168Q86,86,168,90.5Q250,95,309.5,113Q369,131,388,190.5Q407,250,417,338.5Z;
M424,305Q360,360,305,385.5Q250,411,190.5,390Q131,369,103.5,309.5Q76,250,109,196Q142,142,196,88.5Q250,35,325.5,67Q401,99,444.5,174.5Q488,250,424,305Z;
M427.5,330Q410,410,330,420.5Q250,431,196.5,394Q143,357,82,303.5Q21,250,47.5,162Q74,74,162,54.5Q250,35,306.5,86Q363,137,404,193.5Q445,250,427.5,330Z;
M444.5,335.5Q421,421,335.5,458Q250,495,171.5,451Q93,407,95,328.5Q97,250,85,161.5Q73,73,161.5,61.5Q250,50,304.5,95.5Q359,141,413.5,195.5Q468,250,444.5,335.5Z;
M417,338.5Q427,427,338.5,428Q250,429,179,410.5Q108,392,59,321Q10,250,48,168Q86,86,168,90.5Q250,95,309.5,113Q369,131,388,190.5Q407,250,417,338.5Z
"
></animate>
</path>
</g>
</mask>
<rect
x="0"
y="0"
mask="url(#maska)"
fill="url(#gradient)"
width="3060"
height="2040"
transform="translate(-400 -200)"
></rect>
</svg>