HTML 中的 SVG 中的 HTML [英] HTML in SVG in HTML

查看：28 发布时间：2021/12/17 18:45:05 html svg

本文介绍了HTML 中的 SVG 中的 HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个简单的 SVG 文件，它在 Firefox 中显示良好 - 它的一些包装文本使用foreignObject 包含在一个框中以包含一些 HTML - 文本包装在 div 中:

但是，再多的麻烦也无法使这项工作成为包含的

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

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

解决方案

这对我来说很好:

<头><meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML 中的 SVG 中的 HTML<style type='text/css'>svg { 边框:1px 纯黑色；}svg div { 边框:1px 蓝色虚线；}</风格><身体><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>敏捷的棕色狐狸跳过懒狗.打包我的盒子五打酒壶

</foreignObject></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.

解决方案

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>

这篇关于HTML 中的 SVG 中的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

HTML 中的 SVG 中的 HTML [英] HTML in SVG in HTML

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

HTML 中的 SVG 中的 HTML [英] HTML in SVG in HTML

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭