SVG <image>用法及代碼示例

SVG 代表可縮放矢量圖形。它可以用來製作圖形和動畫，就像在 HTML 畫布中一樣。

<image>SVG 元素包含 SVG 文檔內的圖像。它可以顯示光柵圖像文件或其他SVG文件。 SVG 軟件必須支持的唯一圖像格式是 JPEG、PNG 和其他 SVG 文件。

用法:

<image attributes="values" >

屬性：

x:x 軸坐標圖像的定位。
y:圖像的 y 軸坐標定位。
width:圖像的寬度。
height：圖像的高度。
href:圖片來源。
preserveAspectRatio:圖像的縮放。
Global Attributes:使用一些全局屬性，如核心屬性和樣式屬性等。

示例 1：

HTML


<!DOCTYPE html>
<html>
<body>
    <svg width="200" height="200"
        xmlns="http://www.w3.org/2000/svg">       
        <image
            href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            height="200" width="200"/>
    </svg>
</body>
</html>

輸出：

示例 2：更改圖像的 x 和 y 坐標。

HTML


<!DOCTYPE html>
<html>
<body>
    <svg width="400" height="400"
        xmlns="http://www.w3.org/2000/svg">       
        <image
            href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            x="100" y="100" />
    </svg>
</body>
</html>

輸出：

支持的瀏覽器：

Chrome 1 及以上版本
邊 12 及以上
火狐瀏覽器1.5及以上版本
Safari 3.1 及以上版本
Internet Explorer 9 及更高版本
Opera 8 及以上版本

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG <image> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。