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.club.tw/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 的優點，這些優點隨後將應用於其內容。

• 上一頁
• 下一頁