编辑这个页面须要登录或更高权限！

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

最终运行效果如下:

SVG <switch> 元素SVG fill 属性