Safari中SVG路径动画行为异常技术问询

看起来你的路径动画出现异常，大概率是几个细节没处理到位，我帮你一步步排查修复：

1. 路径超出SVG视口导致截断 #

你的SVG设置了viewBox="0 0 100 100"，但path的d属性里出现了180这类超出视口范围的坐标值，这会导致路径被截断，动画自然会出现异常。你需要调整viewBox或者修改path的坐标，让整个路径都能完整显示在视口内。比如把viewBox改成0 0 200 150，就能容纳下整个路径了。

2. 缺少必要的描边属性设置 #

默认情况下SVG path的stroke是none、fill是黑色，所以即使你设置了dash动画，也看不到描边的动效。必须给path加上stroke和stroke-width属性，同时取消填充才能让描边动画正常显示：

path {
  stroke: #000; /* 设置描边颜色 */
  stroke-width: 2; /* 设置描边宽度 */
  fill: none; /* 取消填充，只显示描边 */
  /* 你的原有动画代码 */
  stroke-dasharray: 282 282;
  stroke-dashoffset: 282;
  transition: stroke-dashoffset 1s linear;
  &.animate {
    stroke-dashoffset: 0;
  }
}

3. 手动设置的dasharray数值不准确 #

你手动写了282作为路径长度，但实际路径长度可能和这个值不符，这会导致动画的起始或结束状态异常。更可靠的方式是用JS获取路径的实际长度，再动态设置这些参数：

const path = document.querySelector('path');
const pathLength = path.getTotalLength();
path.style.strokeDasharray = `${pathLength} ${pathLength}`;
path.style.strokeDashoffset = `${pathLength}`;

这样不管路径怎么修改，动画都能准确适配实际长度。

修复后的完整代码示例 #

<div>
  <svg viewBox="0 0 200 150">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"/>
  </svg>
</div>

<style>
div {
  border-radius: 50%;
  border: 10px solid red;
  overflow: hidden;
  width: 300px; /* 给div设置固定宽高，方便显示 */
  height: 300px;
}
svg {
  width: 100%;
  height: 100%;
}
path {
  stroke: #000;
  stroke-width: 2;
  fill: none;
  transition: stroke-dashoffset 1s linear;
}
path.animate {
  stroke-dashoffset: 0;
}
</style>

<script>
const path = document.querySelector('path');
const pathLength = path.getTotalLength();
path.style.strokeDasharray = `${pathLength} ${pathLength}`;
path.style.strokeDashoffset = `${pathLength}`;

// 模拟触发动画，比如点击容器添加类
document.querySelector('div').addEventListener('click', () => {
  path.classList.add('animate');
});
</script>

这样修改后，点击红色圆形容器就能看到路径从无到有的流畅动画效果了。

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri