antvis/G2

兼容性问题 #4785

Aarebecca posted onGitHub

浏览器兼容性

兼容浏览器内核:Chromium (Chrome, Edge) 暂不兼容:WebKit (Safari), Gecko (Fire Fox)

主要体现在动画上,例如:stocksKeyframe

渲染引擎兼容性

目前 SVG 静态渲染无问题,但动画有异常闪烁,例如:stocksKeyframe

此外,动画中 Tooltip 没有更新数据


关闭样式解析后,SVG 渲染器出现如下问题:

point 展示不全:

<img width="389" alt="截屏2023-03-27 上午11 19 41" src="https://user-images.githubusercontent.com/3608471/227832684-c1333a84-1a54-474d-ae44-78fbae87ebeb.png">

posted by xiaoiver about 2 years ago

原因是 .element 这个 Group 上出现了类似 fill lineWidth 这样的属性。 在 Canvas 下没问题,因为 Group 并不会被真正的渲染,但 SVG 下这些属性就会出现在 <g> 元素上,又由于 SVGDOM 属性是可继承的,就会影响到子元素,例如这里的 <rect> <path>

<img width="949" alt="截屏2023-03-28 下午6 59 04" src="https://user-images.githubusercontent.com/3608471/228215865-aa30c2ba-0ad6-4711-941d-65bbb8fdf373.png">

已修复: <img width="666" alt="截屏2023-04-10 下午3 54 55" src="https://user-images.githubusercontent.com/3608471/230855252-d6dfd355-809c-41b8-a107-e241b8be6ca3.png">

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

Fund this Issue

$0.00
Funded

Pull requests