HTML 中的 SVG 中的 HTML

发布于 2024-12-04 21:19:54 字数 798 浏览 2 评论 0原文

我有一个简单的 SVG 文件，在 Firefox 中可以正常查看 - 它使用foreignObject 将一些包装文本放在一个框中以包含一些 HTML - 文本包装在 div 中：

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>

但是再多的 firkling 也无法使其作为包含的

这要么从根本上是不可能的，要么是我在命名空间或其他方面犯了一些错误。但是任何人都可以将上述 SVG 包装在 HTML 文档中，并让它在给定位置（当然相对于 SVG 或其容器）的给定宽度 x 高度的框中显示文本吗？

我还没有在 HTML 中看到 SVG 中的 HTML 示例，这让我觉得我很愚蠢或者不可能 - 互联网上的示例似乎只是如何将 HTML 嵌入到 SVG 中，如上所述。我要更深入了。

原文

I have a simple SVG file which views fine in Firefox - its some wrapped text in a box using a foreignObject to include some HTML - the text is wrapped in the div:

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>

But no amount of firkling can make this work as an included <svg> element within an HTML document. The div always ends up just being flowed with other divs in the document.

Either this is fundamentally not possible or I'm making some mistake with namespaces or something. But can anyone wrap the above SVG in an HTML document and have it display the text in a box of the given width x height at the given position (relative to the SVG or its container, of course)?

I've not seen an example of HTML in SVG in HTML, which makes me think its me being stupid or its impossible - the examples out there on the internet seem to just be how to embed HTML in SVG as above. I'm going deeper.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲歌长辞 2024-12-11 21:19:54

这对我来说效果很好：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML in SVG in HTML</title>
  <style type='text/css'>
    svg { border: 1px solid black; }
    svg div { border: 1px dotted blue; }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with
         five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>
</body>
</html>

This works fine for me:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML in SVG in HTML</title>
  <style type='text/css'>
    svg { border: 1px solid black; }
    svg div { border: 1px dotted blue; }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with
         five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>
</body>
</html>

回复收藏 0 原文

~没有更多了~