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

当启用它时，我们需要注意新类型的循环引用，这就是它变得棘手的地方。
foo.svg，包含 <symbol id="symbol"><foreignObject> <iframe src="http://img.zhejianglong.com/231019/223F42347-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也是这个团队中的一员。