SVG基础 | SVG image 元素 - Web前端

svg <image>元素用于在SVG图像中嵌入位图。通过使用<image>元素你可以将一张位图绘制在SVG图像上面。

下面是一个简单的例子：

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" height="130" width="500" style="fill: #333333"/>

  <image x="20" y="20" width="150" height="46"
   xlink:href="HTTP://img.htmleaf.com/1506/logo.png" />

  <line x1="25" y1="80" x2="350" y2="80"
          style="stroke: #ffffff; stroke-width: 3;"/> 
  <text x="180" y="110" style="fill:#fff;">JQuery之家欢迎您！</text>
</svg>

上面的代码的返回结果是：

在上面的代码中，深灰色的矩形先被绘制出来，然后是jquery之家的logo被绘制在深灰色的矩形之上，接着是一条白色的直线被绘制在logo的下方，最后是一串SVG文字。

SVG文件中的各个元素的排列顺序就是它们被绘制的顺序，最后绘制的元素被放置在SVG图像的最上方。

除了位图之外，你也可以使用<image>元素来嵌入其他的SVG元素。

<image>元素的浏览器兼容性如下：

• Chrome 1.0+

• firefox (Gecko) 1.8+

• Internet Explorer 9.0+

• Opera 8.0+

• Safari 3.0.4+

• Android 3.0+

• Firefox mobile (Gecko) 1.8+

• Safari Mobile 3.0.4+

• ie Mobile 不支持

返回SVG教程目录