SVG 中的其他内容

除了矩形和圆形等图形基元外，SVG 还提供了一组元素，用于在图像中嵌入其他类型的内容。

嵌入光栅图像

与 HTML 中的 img 元素类似，SVG 也具有一个 image 元素来实现相同的功能。您可以使用它来嵌入任意光栅（和矢量）图像。规范要求应用程序至少支持 PNG、JPEG 和 SVG 格式文件。

嵌入的图片成为一个普通的 SVG 元素。这意味着您可以对内容使用裁剪、蒙版、滤镜、旋转以及 SVG 的所有其他工具。

html

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200"
  height="200">
  <image
    x="90"
    y="-65"
    width="128"
    height="146"
    transform="rotate(45)"
    href="https://mdn.org.cn/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png" />
</svg>

由于 SVG 是一个 XML 应用程序，因此您当然可以始终在 SVG 文档中的任何位置嵌入任意 XML。但是，您没有办法定义周围的 SVG 如何对内容做出反应。实际上，在符合规范的查看器中，它将根本不会做出任何反应，数据将被省略。因此，规范在 SVG 中添加了<foreignObject>元素。它的唯一目的是作为其他标记的容器和 SVG 样式属性（最重要的是 width 和 height 以定义对象将占据的空间）的载体。

foreignObject 元素是将 XHTML 嵌入 SVG 的好方法。如果您有较长的文本，HTML 布局比 SVG text 元素更合适、更舒适。另一个经常被引用的用例是使用 MathML 嵌入公式。对于 SVG 的科学应用，这是将这两个世界结合起来的一个非常好的方法。

注意：请记住，foreignObject 的内容必须能够被查看器处理。独立的 SVG 查看器不太可能能够渲染 HTML 或 MathML。

由于 foreignObject 是一个 SVG 元素，因此您可以在 image 的情况下，使用任何 SVG 的功能，这些功能将应用于其内容。