SVG 作為背景影象

你可以在 HTML 文件中顯示 SVG 檔案,方法是將其指定為 CSS 中的背景影象。例如:

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}

如果 SVG 檔案中指定的尺寸大於 HTML 元素的尺寸,則可能需要指定 background-size 屬性,以縮放 SVG 以適合其元素。

與使用 SVG 作為 <img> 一樣 ,值得注意的是這種方法存在一些侷限性:

  • 瀏覽器支援不包括 Internet Explorer 8 及更早版本,也不包括 Android 2.3 及更早版本。
  • 你無法使用 SVG 檔案外部的 CSS 設定 SVG 檔案中包含的各個元素的樣式。所有 CSS 必須在影象檔案本身內。