SVG <image> 图像元素

SVG <image>元素用于将位图图像嵌入SVG图像内。这样,您可以在位图图像的上方或旁边绘制。SVG图像格式转换软件支持JPEG、PNG格式;在SVG中,image元素也可以嵌入任意光栅图像。在光栅图像中,可以对内容使用SVG的滤镜,蒙版,旋转,剪辑和所有其他工具。

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定义图像的链接。

最终运行效果如下: