使用vector-effect: non-scaling-stroke时CSS transition duration失效求助

这个问题我之前踩过坑，根源在于vector-effect: non-scaling-stroke的特殊渲染逻辑会打断CSS过渡的属性插值流程：

当你启用non-scaling-stroke后，浏览器不再按照常规方式计算stroke-width的渲染值——它会忽略元素的缩放、视口变换，直接让描边保持固定的物理宽度。这种机制绕过了CSS过渡依赖的属性值线性更新逻辑，导致过渡动画无法被正确触发。

下面给你两种实用的解决办法：

方法一：用SVG原生<animate>元素替代CSS Transition #

SVG原生动画系统和non-scaling-stroke的兼容性更好，它直接作用于元素的属性，不受特殊渲染规则的干扰。比如你要做stroke-width的过渡动画，可以这么写：

<!-- 视口1的SVG -->
<svg viewBox="0 0 100 100" width="150" height="150">
  <circle cx="50" cy="50" r="40" fill="#f0f0f0" stroke="#2196F3" stroke-width="2" vector-effect="non-scaling-stroke">
    <animate 
      attributeName="stroke-width" 
      from="2" 
      to="6" 
      dur="1.2s" 
      repeatCount="indefinite" 
      alternate 
    />
  </circle>
</svg>

<!-- 视口2的SVG -->
<svg viewBox="0 0 200 200" width="300" height="300">
  <circle cx="100" cy="100" r="80" fill="#f0f0f0" stroke="#2196F3" stroke-width="2" vector-effect="non-scaling-stroke">
    <animate 
      attributeName="stroke-width" 
      from="2" 
      to="6" 
      dur="1.2s" 
      repeatCount="indefinite" 
      alternate 
    />
  </circle>
</svg>

这种方式既能保持两个SVG的描边宽度一致，又能让动画流畅运行。

方法二：用CSS变量+关键帧动画（坚持用CSS的话） #

通过CSS变量来间接控制stroke-width，配合关键帧动画，有时候能绕过non-scaling-stroke对过渡的限制。示例代码：

/* 通用样式 */
svg .animated-stroke {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--stroke-width, 2);
  /* 用关键帧动画替代transition */
  animation: pulse-stroke 1s infinite alternate ease-in-out;
}

@keyframes pulse-stroke {
  0% {
    --stroke-width: 2;
  }
  100% {
    --stroke-width: 6;
  }
}

<!-- 不同视口的SVG都可以用这个类 -->
<svg viewBox="0 0 100 100" width="150" height="150">
  <rect x="10" y="10" width="80" height="80" fill="#f0f0f0" stroke="#FF5722" class="animated-stroke" />
</svg>

如果你的动画是交互触发（比如hover），还可以用JavaScript临时切换vector-effect的状态：在动画开始时移除non-scaling-stroke，动画结束后再重新添加，确保过渡能正常执行。

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