SVG 急速入门教程（08.绘制HTML）

上一篇：绘制图片

本节我们介绍如何使用 <foreignObject> 在 SVG 里绘制普通的 HTML 内容。

1. <foreignObject>

<foreignObject> 元素允许包含来自不同的 XML 命名空间的元素，例如 XHTML / HTML 元素。

基本语法：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  ......
  <foreignObject x="20" y="20" width="160" height="160">
    <div xmlns="http://www.w3.org/1999/xhtml">
      普通 HTML 内容
    </div>
  </foreignObject>
</svg>

• x y 左上角坐标
• width height 宽度和高度

示例：

2. 相关 DOM 接口

• <foreignObject> SVGForeignObjectElement

3. 小结

本节讲解了如何在 SVG 里内嵌 HTML 的内容，下一节我们讲解 SVG 坐标系统。

下一篇：SVG 视口和用户空间