WebKit策略：<foreignObject>可用于绘制svg中的html标签，但与<use>搭配不生效( 二 ) _生活百科

也就是说Blink内核修复了后半段，使浏览器更好的支持了<foreignObject>标签，但是对于引用<foreignObject>标签的情况，还是没有任何进展。那也就是说谷歌浏览器现在是支持的<foreignObject>标签的，只是不支持被<use>标签引用。
最后直接弃用<defs>和<use> ，在需要的地方直接渲染。简单粗暴，最有效。
<foreignObject width="16" height="16" x="16" y="16"><div class="icon-div" xmlns="http://www.w3.org/1999/xhtml"><span class="iconfont" :class="classRef.ModuleClassType.Icon"></span></div></foreignObject>虽然不够优雅，但是真香。
事情原本到这就应该结束了，但是我还是不死心，不知道为什么WebKit要做这样的一个策略。最后，功夫不负有心人，我在Bugzilla又找到了一个提交给WebKit的bug：https://bugs.webkit.org/show_bug.cgi?id=91515 。底下有一名名为Nikolas Zimmermann的程序员对此进行了回应：

文章插图
原文大意是：
是的。由于与foreignObject相关的潜在问题，我们故意禁止它。它需要经过充分测试，仅此而已。
当启用它时，我们需要注意新类型的循环引用，这就是它变得棘手的地方。
foo.svg ，包含 <symbol id="symbol"><foreignObject> <iframe src="http://shimg.jingyanzongjie.com/230728/10252U296-4.jpg"/></foreignObject></symbol>blub.svg 引用"symbol" 。other.html包含foo.svg作为html:img 。... -> 循环
或者考虑<foreignObject>包含<div style="background-image: blub.svg" 的情况...
我们基本上需要将循环检测扩展到所有可以引用其他文件的 HTML 元素/属性。如果您感到有挑战，请随时开始，否则我将不实施解决这个问题。
不过这个bug之后在2020年被其他人重新提起，于是，应该是Nikolas Zimmermann的同事Said Abou-Hallawa在底下也对这个bug进行了补充评论。

文章插图
原文大意是：
上述测试用例在FireFox中有效，但在WebKit或Chrome中无效。
由于foreignObjectTag不是createAllowedElementSet允许的标记之一，因此foreignObject 及其后代被removeDisallowedElementsFromSubtree() 删除。但是即使添加它也不能解决问题，因为 HTML<p>元素将被删除（此处应该是指bug提交人的示例中的p标签），因为它的标签是不允许的。
为了解决这个问题，我们需要重新实现removeDisallowedElementsFromSubtree() ，并且正如 Nikolas 上面提到的，我们需要将循环检测扩展到所有 HTML 元素，以防它们中的任何一个引用其他文件。
所以，很明显，到目前为止，他们也没解决这个问题，导致他们做出这个策略的一个原因是因为removeDisallowedElementsFromSubtree()这个方法写的不够完善，在某些场景下会出现循环引用的bug ，最简单粗暴的办法就是直接不让你在<use>标签中引用<foreignObject>标签，于是他们直接就从源头解决了这个问题。妙，妙，妙啊，真是妙蛙种子吃着妙脆角进了米奇妙妙屋，妙到家了。为了确认这两人的权威性，我特地去查看了WebKit团队的名单，传送门https://webkit.org/team/ ，确实找到了这两个大佬的名字，上文提到的Dirk Schulze也是这个团队中的一员。