SVG动画百分比单位同时相对父元素与自身取值偏差问题咨询

核心原因 #

两个SVG子元素translateX(100%)表现不一致的根本原因是transform-box属性的取值存在差异，该属性决定了transform中百分比单位的参考基准：

• 当属性值为view-box时，百分比参考当前SVG的视口（若未设置viewBox则直接参考SVG元素自身的宽高）计算。你第一个SVG内的path就是这种情况，100%对应SVG的全宽（也就是你说的视口宽度），所以会平移整个屏幕的距离。
• 当属性值为fill-box时，百分比参考元素自身的边界框计算。你第二个SVG内的path就是这种情况，100%仅对应path自身的宽度，所以平移距离更小。

不同类型的SVG元素、不同浏览器对transform-box的默认值处理会有差异，这就会导致相同CSS代码出现不同表现。

解决方案 #

你可以主动给SVG内的动画元素设置统一的transform-box属性值，消除默认值差异带来的影响：

• 若需要百分比参考SVG视口计算，添加如下CSS：

svg .animated-element {
  transform-box: view-box;
}

• 若需要百分比参考元素自身尺寸计算，添加如下CSS：

svg .animated-element {
  transform-box: fill-box;
}

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