本文旨在解决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规则。
解决问题如下：只列举最近用户提交问题，其余问题前面几次补丁已经解决，不在复述。1、解决搜索问题。以前搜索一定要确定到省下面的某个市，这个不符合用户体验。 现在改为，省--所有城市（默认为所有城市，也可以自己选择某个市）。2、解决首页推荐产品部显示问题。（以前没有考虑多个其他浏览器）3、解决供应、求购 今日产品显示问题。（理由同上）4、解决收藏商家、供应、求购问题。 （链接错误）5、解决后台分类过
完整代码示例
以下是完整的HTML、CSS和JavaScript代码示例，展示了如何创建一个在Safari浏览器中也能正常显示的SVG动画：
SVG Animation
使用@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应用在各种环境下都能正常运行。
