SVG图像元素

时间:2020-01-09 10:44:24  来源:igfitidea点击:

SVG的<image>元素用于将位图图像嵌入SVG图像中。这样,我们可以在位图图像的上方或者旁边绘制。

SVG图片示例

这是一个SVGimage示例:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect x="10" y="10" height="130" width="500" style="fill: #000000"/>

  <image x="20" y="20" width="300" height="80"
     xlink:href="http://Hyman.com/images/layout/top-bar-logo.png" />

  <line x1="25" y1="80" x2="350" y2="80"
            style="stroke: #ffffff; stroke-width: 3;"/>
</svg>

首先绘制一个黑色矩形。其次,我的徽标作为图像绘制在黑色矩形的顶部。最后,在我的图像和黑色矩形的顶部都绘制了一条白线。

SVG元素在文件中列出的顺序是它们绘制的顺序。较后的元素绘制在较早的元素之上。

我们也可以使用<image>元素嵌入其他SVG图像。它不必是位图图像。