外来对象

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代码如下：

返回目录