SVG <image>元素用于將位圖圖像嵌入SVG圖像內(nèi)。這樣,您可以在位圖圖像的上方或旁邊繪制。SVG圖像格式轉(zhuǎn)換軟件支持JPEG、PNG格式;在SVG中,image元素也可以嵌入任意光柵圖像。在光柵圖像中,可以對內(nèi)容使用SVG的濾鏡,蒙版,旋轉(zhuǎn),剪輯和所有其他工具。
這是一個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>測試看看?/?
運行后圖像效果:
首先繪制一個黑色矩形。其次,我的徽標(biāo)作為圖像繪制在黑色矩形的頂部。最后,在我的圖像和黑色矩形的頂部都繪制了一條白線。
SVG元素在文件中列出的順序是它們繪制的順序。后一個元素繪制在前一個元素之上。
您還可以使用<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>測試看看?/?
width和height定義圖像的寬度和高度。
xlink:href定義圖像的鏈接。
最終運行效果如下: