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

请教一下 你有找到svg filter 描边的完美解决方案吗? #37

Open
exolution opened this issue May 25, 2023 · 4 comments
Open

Comments

@exolution
Copy link

我看了下你svg stroke的逻辑
现在主流的方式都是用feMorphology 但是这种方式无法实现line-joint:round 这种圆滑描边(aegisub渲染我看都是圆滑描边)
我看你的demo里是用shadow实现的描边 也是因为这个原因吗?
有没有更好的解决办法?

@weizhenye
Copy link
Owner

文字部分不涉及 SVG,靠 SVG 来排版文字太灾难了,用 text-shadow 做的,性能差,效果差;ASS \p 图形用 SVG 的,这部分是 feMorphology

在 next 分支尝试把文字部分换成 -webkit-text-stroke,效果比 text-shadow 好多了,圆滑描边什么的没注意。

@exolution
Copy link
Author

-webkit-text-stroke 没法用 它是往内部描。正常需要往外部描 如svg的paint-order:stroke
我之前就是全部用的svg来排版,问题很多,太痛苦了。就想看看有没有非svg方案。
看来还是无解。
svg处理泰语简直是噩梦,泰语算是常见语言字型最高的了 尤其是safari对于行高处理有严重问题,会忽略他的声调(应该是声调吧)

@imzlh
Copy link

imzlh commented Aug 5, 2023

我发现ASS用box-shadow的描边很粗,而且有很大的锯齿,比libass渲染得差别很大,不知道是不是参数处理的问题

@weizhenye
Copy link
Owner

paint-order 在 DOM 中已经支持了,可以直接用。

ASS.js 中之前已经实现的是用 ::before 叠一层,设置 -webkit-text-stroke,来达到先绘制 stroke,再绘制 fill 的效果,方案来自 #25

不过 paint-order 和叠文字的方案都解决不了文字透明的情况,尝试了 mix-blend-mode 之类的也没有弄出来,有点难搞。

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

No branches or pull requests

3 participants