svgdr教程·外来对象

马黑黑

外来对象

SVG有一个很特殊的标签 <foreignObject>，字面意是外来对象，指在 SVG 图形中可以嵌入来自不同 XML 命名空间的元素，例如 XHTML 和 HTML 等。这为SVG画布提供了更为丰富多彩的展示功能。svgdr 将该标签封装为简写形式的指令 fObj() ：

指令：fObj()

参数：code, x, y, width, height

语法：fObj(code, x, y, width, height)

参数说明：

① code - foreignObject标签里的XHTML或HTML代码
② x - foreignObject标签左上角X坐标
③ y - foreignObject标签左上角Y坐标
④ width - foreignObject标签宽度
⑤ height - foreignObject标签高度

foreignObject 标签最常见的用法是用来装载大段文本或换行文本，这主要是因为 SVG 画布自身给文本换行实属不易，当需要展示较多文本时，人们自然而然想到 foreignObject 标签，使用它来对文本进行排版自由度极高。试看如下例子，我们除了插入较多文字的文本，还有 HTML、行内 CSS 给文本进行排版，最后还使用 HTML 的 img 标签上了一幅图：

上述效果的 svgdr 绘制代码如下：

var htmlStr = `
	<div style="font: normal 18px/24px '宋体';">
		<p>在使用<foreignObject>时，需要注意的是，虽然它提供了在SVG中嵌入HTML的能力，但并不是所有的HTML和CSS特性都会在所有浏览器中表现一致。因此，在设计SVG图形时，需要对目标浏览器进行充分的测试，以确保兼容性和一致性。</p>
		<p>通过使用<foreignObject>元素，开发者可以在SVG图形中嵌入复杂的HTML结构，从而打破了传统SVG内容的限制，实现更为动态和互动的视觉效果。
		</p>
		<p style="text-align: center;">
			<img src="https://638183.freep.cn/638183/small/h4-1.png" alt="" />
		</p>
	</div>`;
dr.polygon('0 200,380 400,760 200,380 0', 'lightblue');
dr.fObj(htmlStr,20,20,720,380);
	

SVG代码如下：

返回目录

梦江南

跟着老师学代码。谢谢老师辛苦！早上好！

红影

还可以加入外来的对象啊。
这个里面加入了文字和图片，看到的熟悉的div，它们都被包裹起来了。
再加个菱形的多边形颜色，一个漂亮的文字说明就出来了

红影

SVG代码代码里好像多了个</foreignobject>，一个就够了吧？
图片的引入也用p标签么？是为了排序吧

马黑黑

红影 发表于 2024-11-23 09:50
SVG代码代码里好像多了个，一个就够了吧？
图片的引入也用p标签么？是为了排序吧

这是标签收尾符。完整的标签是酱紫：

<foreignObject> ... </foreignObject>

xml标记语言支持自闭合标签，像这样：

<img src="..." alt = "" ... />

但是，<foreignObject> 标签不是自闭合标签，必须有收尾符，它才能将 HTML 代码收拢。

起个网名好难

红影

马黑黑 发表于 2024-11-23 10:38
这是标签收尾符。完整的标签是酱紫：

...

嗯嗯，知道了，谢谢黑黑解答

小辣椒

还可以这样啊，外来对象，感觉SVG很强大，但小辣椒对这个SVG还是没有很明白的

马黑黑

小辣椒 发表于 2024-11-23 12:44
还可以这样啊，外来对象，感觉SVG很强大，但小辣椒对这个SVG还是没有很明白的

稀里糊涂也挺好

小辣椒

马黑黑 发表于 2024-11-23 13:15
稀里糊涂也挺好

花飞飞

这个示范效果看上去跟古风窗框似的，很有艺术感。。。
加上那张PNG图片，怪好看。。

花飞飞

SVG图形中嵌入复杂的HTML结构，
HTML可实现的效果很多，
如果都能套进去，那岂不是有无限可能。。

花飞飞

SVG包容性好强啊。。。很厉害。。

马黑黑

花飞飞 发表于 2024-11-23 18:48
SVG包容性好强啊。。。很厉害。。

还行

马黑黑

小辣椒 发表于 2024-11-23 14:13

花飞飞

马黑黑 发表于 2024-11-23 20:24
还行

不止是还行，是有无限可能

马黑黑

花飞飞 发表于 2024-11-24 18:08
不止是还行，是有无限可能

这也行？

花飞飞

马黑黑 发表于 2024-11-24 18:09
这也行？

它这么神奇，小白仰慕一下行的。。

马黑黑

花飞飞 发表于 2024-11-24 18:27
它这么神奇，小白仰慕一下行的。。

也好