SVG 模式中的 SVG foreignObject 不起作用
[英]SVG foreignObject in an SVG pattern doesn't work
问题描述
I can't seem to get a foreignObject to work from within an SVG pattern.
我似乎无法让 foreignObject 在 SVG 模式中工作。 I can get it to work on its own, but not in a pattern.我可以让它自己工作，但不是以某种模式。 I've had a quick look around:我快速浏览了一下：
- its listed as a valid content element for a pattern in SVG 1.1 and SVG 2.0它被列为SVG 1.1和SVG 2.0中模式的有效内容元素
- Its used in this accepted answer 它用于这个公认的答案
- Something about not allowing foreignObject and svg:use, but I don't know if its relevant关于不允许foreignObject和svg：使用，但我不知道它是否相关
so I'm at a loss really what I'm doing wrong.所以我真的很茫然我做错了什么。 I've added a contrived snippet to reproduce below, but I'm specifically interested in arbitrary html in a foreignObject, in a pattern.我在下面添加了一个人为的片段来重现，但我对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>
1 个解决方案
解决方案1
1 已采纳 2020-06-05 14:19:31
I'm afraid it looks like browsers don't support this, even though the spec says it's valid.恐怕浏览器似乎不支持这一点，即使规范说它是有效的。
- https://bugzilla-dev.allizom.org/show_bug.cgi?id=1348768 https://bugzilla-dev.allizom.org/show_bug.cgi?id=1348768
- https://bugzilla-dev.allizom.org/show_bug.cgi?id=486240 https://bugzilla-dev.allizom.org/show_bug.cgi?id=486240
- Here's another demo of the issue from 2014
codepen.io/yoksel/details/BidHq(SO won't let me post the link without accompanying code, but the code is irrelevant in this case)这是 2014 年codepen.io/yoksel/details/BidHq的另一个问题演示（所以不会让我在没有随附代码的情况下发布链接，但在这种情况下代码无关紧要）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.