我似乎无法让外来对象从SVG模式中工作。我可以让它自己工作，但不能以一种模式工作。我快速浏览了一下周围：
- 它被列为 SVG 1.1 和 SVG 2.0 中模式的有效内容元素
- 它用于这个公认的答案
- 关于不允许 foreignObject 和 svg：use 的一些事情，但我不知道它是否相关
所以我真的不知道我做错了什么。我在下面添加了一个人为的片段来重现，但我对异物中的任意 html 特别感兴趣，以一种模式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style>
</head>
<body>
<svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
<!-- doesn't work -->
<pattern id=tex width=100 height=100>
<foreignObject x="0" y="0" width="100" height="100">
<img xmlns="http://www.w3.org/1999/xhtml" src="https://i.picsum.photos/id/258/200/200.jpg" x="0" y="0" width="100" height="100" />
</foreignObject>
</pattern>
<pattern id=tex2 width=100 height=100>
<circle fill=blue cx=50 cy=50 r=50 width=100 height=100></circle>
</pattern>
<!-- foreignObject on its own works -->
<foreignObject x="0" y="0" width="200" height="100">
<img xmlns="http://www.w3.org/1999/xhtml" src="https://i.picsum.photos/id/258/200/200.jpg" x="0" y="0" width="100" height="100" />
</foreignObject>
<!-- pattern with foreignObject doesn't work-->
<rect fill="url(#tex)" stroke="black" x=0 y=100 width="100" height="100"/>
<!-- basic pattern works-->
<rect fill="url(#tex2)" stroke="black" x=0 y=200 width="100" height="100"/>
</svg>
</body>
</html>恐怕浏览器似乎不支持此功能，即使规范说它是有效的。
- https://bugzilla-dev.allizom.org/show_bug.cgi?id=1348768
- https://bugzilla-dev.allizom.org/show_bug.cgi?id=486240
- 这是 2014 年
codepen.io/yoksel/details/BidHq问题的另一个演示(SO 不允许我在没有随附代码的情况下发布链接，但在这种情况下代码无关紧要(