Front End

Appearance

SVG image元素 ​

使用SVG<image>元素可以在SVG图片中嵌套位图图片。这样，你可以在上面或者旁边绘制位图图片。

SVG image视频 ​

下面是SVGimage教程的视频版：

SVG image示例 ​

下面是一个SVGimage示例：

xml
<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://brucewar.qiniudn.com/aape.jpg" />

  <line x1="25" y1="80" x2="350" y2="80"
            style="stroke: #ffffff; stroke-width: 3;"/>
</svg>
<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://brucewar.qiniudn.com/aape.jpg" />

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

最终图片如下：

首先绘制了一个黑色矩形，然后在黑色矩形之上绘制了一张图片，后面的元素的都会绘制在之前元素的上面。

你也可以使用<image>元素嵌套其它SVG图片。所以，也不一定是位图图像。