SVG <image>元素用于將位圖圖像嵌入SVG圖像內(nèi)。這樣，您可以在位圖圖像的上方或旁邊繪制。SVG圖像格式轉(zhuǎn)換軟件支持JPEG、PNG格式；在SVG中，image元素也可以嵌入任意光柵圖像。在光柵圖像中，可以對(duì)內(nèi)容使用SVG的濾鏡，蒙版，旋轉(zhuǎn)，剪輯和所有其他工具。
這是一個(gè)SVG image示例：
<svg width="500" height="160"> <rect x="10" y="10" height="130" width="500" style="fill: #000000"></rect> <image x="20" y="20" width="300" height="80" xlink:href="/static/images/logo.png"></image> </svg> <svg> <image x="20" y="20" xlink:href="/static/images/logo.png"></image> <line x1="25" y1="80" x2="350" y2="80"></line> </svg>測(cè)試看看?/?
運(yùn)行后圖像效果：
首先繪制一個(gè)黑色矩形。其次，我的徽標(biāo)作為圖像繪制在黑色矩形的頂部。最后，在我的圖像和黑色矩形的頂部都繪制了一條白線。
SVG元素在文件中列出的順序是它們繪制的順序。后一個(gè)元素繪制在前一個(gè)元素之上。
您還可以使用<image>元素嵌入其他SVG圖像。它不必是位圖圖像。
<svg width="500" height="160"> <image x="90" y="-65" width="100" height="146" transform="rotate(45)" xlink:href="/static/images/logo.png"/> </svg>測(cè)試看看?/?
width和height定義圖像的寬度和高度。
xlink：href定義圖像的鏈接。
最終運(yùn)行效果如下: