The issue has been closed
浏览器兼容性
兼容浏览器内核:Chromium (Chrome, Edge)
暂不兼容:WebKit (Safari), Gecko (Fire Fox)
主要体现在动画上,例如:stocksKeyframe
渲染引擎兼容性
目前 SVG 静态渲染无问题,但动画有异常闪烁,例如:stocksKeyframe
此外,动画中 Tooltip 没有更新数据

posted by xiaoiver about 2 years ago 
posted by xiaoiver about 2 years ago 
SVG 动画闪烁的原因如下:
执行 shapeToShape 动画时,在创建 animation 对象前会调用 replaceChild
,首先移除旧图形,再添加新图形。
但此时新图形的属性还不确定,例如下图中 Path 的路径为空,导致有一瞬间 <path>
其实是空的,造成了白屏闪烁的现象:
<img width="669" alt="截屏2023-04-10 下午4 47 27" src="https://user-images.githubusercontent.com/3608471/230867491-c5930b51-e9d8-4741-b57e-eda5afa15c47.png">
而这里 Path 为空的原因是 append 的时候没传 d 属性,导致创建:
<img width="634" alt="截屏2023-04-10 下午5 01 57" src="https://user-images.githubusercontent.com/3608471/230870107-2d549a1a-3f8a-400d-b4dd-dec91732add6.png">
修复方式我理解应该在 G 里判断,如果 <path> 的 d 是空的,就不生成 DOM 结构,等有了再创建。
posted by xiaoiver about 2 years ago
@xiaoiver @Aarebecca 这个修复了吗?修复的话,关闭 issue。
posted by hustcc about 2 years ago