SVG动画在Safari中不显示？CSS嵌套兼容性问题与跨浏览器解决方案教程-js教程-PHP中文网

SVG动画在Safari中不显示？CSS嵌套兼容性问题与跨浏览器解决方案教程

花韻仙語

发布： 2025-09-01 18:02:01

原创

770人浏览过

SVG动画在Safari中不显示？CSS嵌套兼容性问题与跨浏览器解决方案教程

本教程旨在解决SVG动画在Safari浏览器中不显示的问题。核心原因在于CSS嵌套这一新特性尚未获得广泛浏览器支持。我们将详细阐述该兼容性挑战，并提供将嵌套CSS规则重构为传统选择器语法的解决方案，确保SVG动画在包括Safari在内的所有主流浏览器上稳定运行，提升跨浏览器兼容性。

理解CSS嵌套及其兼容性挑战

css嵌套（css nesting）是一项激动人心的新特性，它允许开发者将相关的css规则嵌套在彼此内部，从而提高代码的可读性和组织性，类似于sass或less等css预处理器。例如，你可以在一个父选择器内部直接定义其子元素的样式，而无需重复父选择器。

然而，作为一项相对较新的W3C提案，CSS嵌套的浏览器支持度尚未普及。尽管现代的基于Chromium的浏览器（如Chrome、Edge）已经较早地实现了支持，但包括Safari和Firefox在内的其他浏览器，尤其是一些旧版本，可能尚未完全支持或仅在最新技术预览版中提供支持。当浏览器遇到不支持的CSS语法时，它通常会忽略这些规则，导致样式不生效，这正是SVG动画在Safari中不显示的核心原因。

问题示例：SVG动画失效的CSS嵌套代码

考虑一个常见的SVG动画场景：一个带勾选效果的圆形动画。以下是原始的HTML、CSS和JavaScript代码片段，它在Chrome浏览器中运行良好，但在Safari中SVG元素可能完全不显示或动画失效：

HTML结构:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<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>

登录后复制

JavaScript (用于动画重置):

立即学习“前端免费学习笔记（深入）”；

$('#checkmark-svg').on('click', function(){
  svg = $(this);
  svg.removeClass('run-animation').width(); // 强制重绘以重置动画
  svg.addClass('run-animation');
  return false;
});

登录后复制

原始CSS (包含嵌套):

.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;

  .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;
  }

  .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;
  }
}

登录后复制

在上述CSS代码中，有几处使用了CSS嵌套，例如svg .cls-1、.run-animation .circle和.run-animation .checkmark。这些嵌套规则在不支持CSS嵌套的浏览器中会被直接忽略，导致SVG元素的部分样式（如描边颜色）和动画属性无法应用，从而使动画失效或SVG不显示。

解决方案：解除CSS嵌套以提升兼容性

解决此问题的最直接和最有效方法是将所有嵌套的CSS规则重构为传统的、扁平化的选择器语法。这意味着每个选择器都将独立声明，而不是嵌套在父选择器内部。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

以下是经过解除嵌套处理后的CSS代码：

重构后的CSS:

.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' 独立声明 */
svg .cls-1 {
  stroke: #2d77e3;
}

.circle {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.checkmark {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

/* 解除嵌套：将 '.run-animation .circle' 独立声明 */
.run-animation .circle {
  animation: 2.5s circleDraw forwards;
}
/* 解除嵌套：将 '.run-animation .checkmark' 独立声明 */
.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;
  }
}

登录后复制

通过将svg .cls-1、.run-animation .circle和.run-animation .checkmark等规则从嵌套结构中提取出来，并使用传统的后代选择器形式，我们确保了这些样式在所有主流浏览器中都能被正确解析和应用，包括Safari和Firefox。

完整的兼容性代码示例

以下是整合了HTML、JavaScript和解除嵌套后CSS的完整代码，确保了SVG动画在各种浏览器中的兼容性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Checkmark Animation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .cls-1 {
            fill: none;
            stroke: #231f20;
            stroke-miterlimit: 10;
            stroke-width: 5px;
        }

        .svg-check {
            position: inherit;
        }

        svg {
            margin: auto;
            width: 100px; /* 稍微放大以便观察 */
            height: 100px;
            display: block;
            cursor: pointer; /* 添加点击指示 */
        }
        /* 解除嵌套 */
        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>
        $(document).ready(function() {
            $('#checkmark-svg').on('click', function() {
                var svg = $(this);
                // 移除类并强制重绘以重置动画
                svg.removeClass('run-animation').width(); 
                svg.addClass('run-animation');
                return false;
            });
        });
    </script>

</body>
</html>

登录后复制

跨浏览器兼容性最佳实践

关注浏览器兼容性列表： 在使用任何新的CSS特性时，务必查阅caniuse.com等兼容性网站，了解其在主流浏览器中的支持情况。对于生产环境，应优先使用具有广泛支持的特性，或为不支持的浏览器提供回退方案。
构建工具预处理： 如果你确实想利用CSS嵌套的便利性，可以考虑在开发流程中引入构建工具，如PostCSS。配合postcss-nesting等插件，可以在编译时自动将嵌套的CSS规则转换为兼容性更好的扁平化CSS，从而兼顾开发效率和生产环境的兼容性。
特性检测（@supports）： CSS的@supports规则允许你检测浏览器是否支持特定的CSS特性。虽然它可以用来判断浏览器是否支持CSS嵌套，例如：
```
.elem::after {
  content: "您的浏览器不支持CSS嵌套";
  color: red;
}
@supports (selector(&)) { /* 检测是否支持CSS嵌套 */
  .elem::after {
    content: "您的浏览器支持CSS嵌套";
    color: green;
  }
}
```
登录后复制
然而，对于像本教程中SVG动画失效的问题，仅仅检测支持性并不能直接解决问题，因为你仍然需要为不支持的浏览器提供一套完整的、非嵌套的CSS规则。因此，在这种场景下，直接解除嵌套通常是更实用的解决方案。
广泛测试： 在项目发布前，务必在不同的浏览器（Chrome, Firefox, Safari, Edge等）和不同设备（桌面、移动端）上进行充分的测试，以确保所有功能和样式都能按预期工作。

总结

SVG动画在Safari中不显示的问题，往往是由于使用了CSS嵌套这一尚未获得广泛支持的新特性所致。通过将嵌套的CSS规则重构为传统的、扁平化的选择器语法，可以有效解决这一兼容性问题，确保SVG动画在包括Safari在内的所有主流浏览器上稳定运行。在Web开发中，尤其是在生产环境中，开发者应始终关注CSS新特性的浏览器兼容性，并采取适当的策略（如解除嵌套、使用构建工具或提供回退方案）来保障用户体验和应用的稳定性。

以上就是SVG动画在Safari中不显示？CSS嵌套兼容性问题与跨浏览器解决方案教程的详细内容，更多请关注php中文网其它相关文章！