解决Safari浏览器SVG动画不显示的问题-js教程-PHP中文网

解决Safari浏览器SVG动画不显示的问题

心靈之曲

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

原创

351人浏览过

解决safari浏览器svg动画不显示的问题

本文旨在解决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规则。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

完整代码示例

以下是完整的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应用在各种环境下都能正常运行。

以上就是解决Safari浏览器SVG动画不显示的问题的详细内容，更多请关注php中文网其它相关文章！