gpt4 book ai didi

HTML 中的 SVG 中的 HTML

转载 作者:技术小花猫 更新时间:2023-10-29 11:41:07 28 4
gpt4 key购买 nike

我有一个简单的 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>

但是再多的花哨也无法使它作为 HTML 文档中包含的 元素工作。 div 总是最终与文档中的其他 div 一起流动。

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

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

最佳答案

This works fine对我来说:

<!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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7458546/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com