本文旨在解决SVG动画在Safari浏览器中无法正常显示的问题。通过分析问题代码，指出CSS嵌套特性在Safari浏览器中的兼容性问题，并提供解决方案：移除CSS嵌套，采用更兼容的CSS写法。同时，简要介绍了使用@supports规则进行CSS特性检测的方法，但建议直接采用兼容性更好的CSS写法以避免额外处理。
SVG动画在现代Web开发中应用广泛，但不同浏览器对CSS特性的支持程度存在差异，导致动画在某些浏览器中无法正常显示。本文将针对Safari浏览器中SVG动画不显示的问题，提供详细的解决方案。
问题分析：CSS嵌套的兼容性
导致Safari浏览器无法正确显示SVG动画的常见原因之一是使用了CSS嵌套特性。CSS嵌套允许开发者在一个选择器内部嵌套其他选择器，使CSS代码更具可读性和维护性。然而，截至目前，CSS嵌套的兼容性还不够广泛，Safari浏览器对该特性的支持有限。
解决方案：移除CSS嵌套
要解决Safari浏览器中SVG动画不显示的问题，最直接有效的方法是移除CSS嵌套，改用更兼容的CSS写法。这意味着将嵌套的CSS规则展开，使其成为独立的规则。
以下是原始CSS代码示例（包含CSS嵌套）：
svg {
margin: auto;
width: 50px;
height: 50px;
display: block;
.cls-1 {
stroke: #2d77e3;
}
}
.run-animation {
.circle {
animation: 2.5s circleDraw forwards;
}
.checkmark {
animation: 0.75s checkmarkDraw forwards;
animation-delay: 1s;
}
}修改后的CSS代码（移除CSS嵌套）：
svg {
margin: auto;
width: 50px;
height: 50px;
display: block;
}
svg .cls-1 {
stroke: #2d77e3;
}
.run-animation .circle {
animation: 2.5s circleDraw forwards;
}
.run-animation .checkmark {
animation: 0.75s checkmarkDraw forwards;
animation-delay: 1s;
}通过将嵌套的.cls-1、.circle和.checkmark选择器提升到SVG元素的外部，确保所有浏览器都能正确解析这些CSS规则。
完整代码示例
以下是完整的HTML、CSS和JavaScript代码示例，展示了如何创建一个在Safari浏览器中也能正常显示的SVG动画：
<!DOCTYPE html>
<html>
<head>
<title>SVG Animation</title>
<style>
.cls-1 {
fill: none;
stroke: #231f20;
stroke-miterlimit: 10;
stroke-width: 5px;
}
.svg-check {
position: inherit;
}
svg {
margin: auto;
width: 50px;
height: 50px;
display: block;
}
svg .cls-1 {
stroke: #2d77e3;
}
.circle {
stroke-dasharray: 700;
stroke-dashoffset: 700;
}
.checkmark {
stroke-dasharray: 150;
stroke-dashoffset: 150;
}
.run-animation .circle {
animation: 2.5s circleDraw forwards;
}
.run-animation .checkmark {
animation: 0.75s checkmarkDraw forwards;
animation-delay: 1s;
}
@keyframes circleDraw {
from {
stroke-dashoffset: 700;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes checkmarkDraw {
from {
stroke-dashoffset: 150;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
<circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
<polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
</svg>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#checkmark-svg').on('click', function() {
svg = $(this);
svg.removeClass('run-animation').width();
svg.addClass('run-animation');
return false;
})
</script>
</body>
</html>使用@supports进行CSS特性检测（不推荐）
虽然可以使用@supports规则检测浏览器是否支持CSS嵌套，并根据检测结果应用不同的CSS规则，但这会增加代码的复杂性。
.elem::after {
content: "Your browser does not support CSS nesting";
color: red;
}
@supports (selector(&)) {
.elem::after {
content: "Your browser supports CSS nesting";
color: green;
}
}由于需要为不支持CSS嵌套的浏览器编写额外的CSS代码，因此不建议采用这种方法。
总结与建议
为了确保SVG动画在所有浏览器中都能正常显示，建议避免使用尚未广泛支持的CSS特性，如CSS嵌套。采用兼容性更好的CSS写法，可以减少浏览器兼容性问题，提高Web应用的稳定性和用户体验。在开发过程中，应充分考虑不同浏览器的兼容性，并进行充分的测试，以确保Web应用在各种环境下都能正常运行。
