SVG 中的其他内容

嵌入栅格图像

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

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

<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/Reference/Element/image/mdn_logo_only_color.png" />
</svg>

嵌入任意 XML

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

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

由于 foreignObject 是一个 SVG 元素，因此，就像 image 的情况一样，您可以对其使用任何 SVG 的优点，这些优点随后将应用于其内容。

• 上一页
• 下一页