WebKit策略:可用于绘制svg中的html标签,但与搭配不生效

  在里面可以利用绘制html标签,原本是我在iconfont采用Font class方式引入svg的无奈之举。

  起初的设计是所有icon先在中先渲染,以达到icon复用的效果,icon采用Symbol方式引入svg感觉也是比较合适的,比较规范的。



  然后再需要用到的地方用克隆下来,感觉很完美。

  但是理想很丰满,现实很骨感。由于某些功能会被影响到,不能使用Symbol方式引入,最后只能选择Font class引入svg。于是代码变为了下列



  但是在需要的地方使用克隆下来,会发现在谷歌浏览器上却完全显示不出标签的内容,即不显示iconfont图标。

  刚开始,我以为是不能在标签中使用标签,于是我就去查看了SVG规范,传送门:https://www.w3.org/TR/SVG/struct.html#DefsElement,SVG规范是支持这种写法的。打开F12,查看标签下的dom结构,也可以看到标签其实是有生成的,也是佐证了这一点。

WebKit策略:可用于绘制svg中的html标签,但与搭配不生效插图

  但是查看引用标签的地方,就没有生成对应的标签,我查看SVG规范文档并没有提到标签不能与标签共同使用的限制。最后我打开了github,在w3c的【SVG工作组规范】项目下寻找答案,传送门:https://github.com/w3c/svgwg,最后找到了一个讨论:https://github.com/w3c/svgwg/issues/511。这位程序员在讨论中说除了 Gecko 之外的所有浏览器都限制元素中的,他在思考为什么Gecko之类的浏览器允许这么做。

WebKit策略:可用于绘制svg中的html标签,但与搭配不生效插图1

   这下就有点头绪了,原来是浏览器内核原因。那简单,我们找个Gecko内核的浏览器验证下就知道了,Gecko内核最出名的就是FireFox浏览器(火狐浏览器)了。其实我的电脑也装了火狐浏览器,但是由于我开发一直用的是谷歌浏览器,确实也是好久好久没打开火狐了,放着吃灰,这次也确实没想到可能是浏览器本身的问题。打开火狐浏览器,果然能显示标签的内容,即显示了iconfont图标。

WebKit策略:可用于绘制svg中的html标签,但与搭配不生效插图2

  不过为什么会出现这样的情况呢,另一个叫Dirk Schulze的程序员表示:出于复杂性的原因,WebKit不允许引用foreignObject。 我们没有时间查看所有影响(包括安全影响),如果内容是基于HTML的,那么对foreignObject的支持永远不会很好。(Blink修复了后半部分)

  也就是说Blink内核修复了后半段,使浏览器更好的支持了标签,但是对于引用标签的情况,还是没有任何进展。那也就是说谷歌浏览器现在是支持的标签的,只是不支持被标签引用。

  最后直接弃用,在需要的地方直接渲染。简单粗暴,最有效。


  

  虽然不够优雅,但是真香。

  事情原本到这就应该结束了,但是我还是不死心,不知道为什么WebKit要做这样的一个策略。最后,功夫不负有心人,我在Bugzilla又找到了一个提交给WebKit的bug:https://bugs.webkit.org/show_bug.cgi?id=91515。底下有一名名为Nikolas Zimmermann的程序员对此进行了回应:

WebKit策略:可用于绘制svg中的html标签,但与搭配不生效插图3

   原文大意是:

    是的。由于与foreignObject相关的潜在问题,我们故意禁止它。它需要经过充分测试,仅此而已。

    当启用它时,我们需要注意新类型的循环引用,这就是它变得棘手的地方。

    foo.svg,包含
    blub.svg 引用"symbol"。other.html包含foo.svg作为html:img。... -> 循环

    或者考虑包含

    我们基本上需要将循环检测扩展到所有可以引用其他文件的 HTML 元素/属性。
    如果您感到有挑战,请随时开始,否则我将不实施解决这个问题。

  不过这个bug之后在2020年被其他人重新提起,于是,应该是Nikolas Zimmermann的同事Said Abou-Hallawa在底下也对这个bug进行了补充评论。WebKit策略:可用于绘制svg中的html标签,但与搭配不生效插图4

   原文大意是:

    上述测试用例在FireFox中有效,但在WebKit或Chrome中无效。

    由于foreignObjectTag不是createAllowedElementSet允许的标记之一,因此foreignObject 及其后代被removeDisallowedElementsFromSubtree() 删除。但是即使添加它也不能解决问题,因为 HTML

元素将被删除(此处应该是指bug提交人的示例中的p标签),因为它的标签是不允许的。

    为了解决这个问题,我们需要重新实现removeDisallowedElementsFromSubtree(),并且正如 Nikolas 上面提到的,我们需要将循环检测扩展到所有 HTML 元素,以防它们中的任何一个引用其他文件。

  所以,很明显,到目前为止,他们也没解决这个问题,导致他们做出这个策略的一个原因是因为removeDisallowedElementsFromSubtree()这个方法写的不够完善,在某些场景下会出现循环引用的bug,最简单粗暴的办法就是直接不让你在标签中引用标签,于是他们直接就从源头解决了这个问题。妙,妙,妙啊,真是妙蛙种子吃着妙脆角进了米奇妙妙屋,妙到家了。为了确认这两人的权威性,我特地去查看了WebKit团队的名单,传送门https://webkit.org/team/,确实找到了这两个大佬的名字,上文提到的Dirk Schulze也是这个团队中的一员。

WebKit策略:可用于绘制svg中的html标签,但与搭配不生效插图5

  这下事情是真的结束了,最后大致扫一眼名单,这个团队的很多人最后都去了苹果,不得不说苹果真的挖人有一套,满屏的apple。

        

posted @
2022-11-12 17:41 
他好像一条狗啊 
阅读(4
评论(0
编辑 
收藏 
举报

文章来源于互联网:WebKit策略:可用于绘制svg中的html标签,但与搭配不生效

THE END
分享
二维码