问题背景
没有更改代码的情况下，svg动画在Chrome、Safari、Firefox下样式飞了，360浏览器、搜狗浏览器下样式正常（没有看其他浏览器的情况，IE浏览器不支持svg动画）
追溯问题
观察出问题动画，发现是元素旋转基点发生了变化，涉及到的相关属性transform-origin，修改transform-origin属性后，动画在Chrome、Safari、Firefox下表现正常了
但是在360浏览器、搜狗浏览器又错乱了。Chrome的私有属性-webkit-transform-origin在360浏览器 、搜狗浏览器同样生效。
又去查了一些svg相关的信息，但对本问题都没有帮助。
最后同事解决了这个问题–
推测浏览器行为变了，推测是取父元素的标准变了
搜transform-origin找到相关文档，发现有个Percentages：refer to the size of bounding box
搜索关键字，搜到transform-box属性，验证se也确实没有这个属性，将其值改为fill-box后正常了
后续
直接英文文档有困难，囧…找到了相关的中文文档https://cloud.tencent.com/developer/section/1072451
transform-box
该transform-box属性定义了与transform以及transform-origin属性相关的布局框。1
2
3
4
5
6
7
8
9/* Keyword values */
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;
/* Global values */
transform-box: inherit;
transform-box: initial;
transform-box: unset;
| Initial value | border-box |
|---|---|
| Applies to | transformable elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
可能值
border-box——使用边框作为参考框。表的参考框是包裹着该表的边框，而不是其表框。fill-box——使用对象边界框作为参考框。view-box——使用最近的SVG视口作为参考框。如果viewBox属性为创建SVG视口元素指定了一个值，则参考框位于由viewBox属性建立的坐标系的原点处，并且参考框的尺寸被设置为该viewBox属性的宽度和高度值。
形式语法
1 | border-box | fill-box | view-box |
规范
|Specification|Status|Comment|
|CSS Transforms Level 1The definition of ‘transform-box’ in that specification.|Working Draft|Initial definition|
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | No support | 55.0 (55.0)1 | No support | No support | ? |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | ? | 55.0 (55.0)1 | ? | ? | ? |
总结
- 擅用搜索工具，svn+Google
- 先确认是不是浏览器行为变了，确认后找哪些属性的行为变了
- 多写码，在学习实践中拓宽思路
- 学好英语
transform-origin 的定位
transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数，第一个参数表示X方向，第二个参数表示Y方向，但是，当用 left，right，center 来表示的时候，是不区分先后的！也就是说 left center 和 center left 是一回事。具体见下表：
| top left | left top 等价于 0 0； | |
| top | top center | center top 等价于 50% 0 |
| right top | top right 等价于 100% 0 | |
| left | left center | center left 等价于 0 50% |
| center | center center 等价于 50% 50%（默认值） | |
| right | right center | center right 等价于 100% 50% |
| bottom left | left bottom 等价于 0 100% | |
| bottom | bottom center | center bottom 等价于 50% 100% |
| bottom right | right bottom 等价于 100% 100% |
svg中的transform
HTML元素的CSS3 transform和SVG的transform坐标系统大相径庭；
平常我们使用transform其坐标是相对于当前元素而言的，默认是元素的中心点变换，我们可以通过transform-origin属性改变变换的中心点。而SVG中的transform的坐标变换的是相对于画布的左上角计算的，跟HTML的transform差别较大，理解上也更加麻烦。
体的语法细节有差异。SVG transform属性语法有些自带偏移。而CSS transform则更加纯粹些。