我似乎无法在SVG模式中使用foreignObject。我可以让它自己工作,但不能按模式工作。我看了一下周围:
所以我真的不知道我做错了什么。我添加了一个人为的片段来重现下面的内容,但是我特别对foreignObject中的任意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>
