SVG <image>元素用于将位图图像嵌入SVG图像内。这样,您可以在位图图像的上方或旁边绘制。SVG图像格式转换软件支持JPEG、PNG格式;在SVG中,image元素也可以嵌入任意光栅图像。在光栅图像中,可以对内容使用SVG的滤镜,蒙版,旋转,剪辑和所有其他工具。
这是一个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>测试看看?/?
运行后图像效果:
首先绘制一个黑色矩形。其次,我的徽标作为图像绘制在黑色矩形的顶部。最后,在我的图像和黑色矩形的顶部都绘制了一条白线。
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定义图像的链接。
最终运行效果如下: