嵌入 HTML

前端教程SVG

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

<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：宽度和高度

示例：

新窗口打开

相关 DOM 接口

• <foreignObject> SVGForeignObjectElement

小结

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