Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

兼容性问题 #4785

Closed
Aarebecca opened this issue Mar 18, 2023 · 4 comments
Closed

兼容性问题 #4785

Aarebecca opened this issue Mar 18, 2023 · 4 comments
Assignees
Labels

Comments

@Aarebecca
Copy link
Contributor

浏览器兼容性

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

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

渲染引擎兼容性

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

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

@xiaoiver xiaoiver self-assigned this Mar 27, 2023
@xiaoiver
Copy link
Contributor

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

point 展示不全:

截屏2023-03-27 上午11 19 41

@xiaoiver
Copy link
Contributor

xiaoiver commented Mar 28, 2023

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

截屏2023-03-28 下午6 59 04

已修复:
截屏2023-04-10 下午3 54 55

@xiaoiver
Copy link
Contributor

xiaoiver commented Apr 10, 2023

SVG 动画闪烁的原因如下:

执行 shapeToShape 动画时,在创建 animation 对象前会调用 replaceChild,首先移除旧图形,再添加新图形。
但此时新图形的属性还不确定,例如下图中 Path 的路径为空,导致有一瞬间 <path> 其实是空的,造成了白屏闪烁的现象:

截屏2023-04-10 下午4 47 27

而这里 Path 为空的原因是 append 的时候没传 d 属性,导致创建:
截屏2023-04-10 下午5 01 57

修复方式我理解应该在 G 里判断,如果 的 d 是空的,就不生成 DOM 结构,等有了再创建。

@hustcc
Copy link
Member

hustcc commented Apr 23, 2023

@xiaoiver @Aarebecca 这个修复了吗?修复的话,关闭 issue。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants