概要总结
1、图片属性
2、图片加载
3、preserveAspectRatio属性
一、图片属性
1、x: 图片位置的x坐标，Number类型。
2、y: 图片位置的y坐标，Number类型。
3、xlink:href: 图片路径，String类型。
4、width: 图片宽度，Number类型。
5、height: 图片高度，Number类型。
6、preserveAspectRatio: 属性表示是否强制进行统一缩放，String类型。
二、图片加载
<svg width="400" height="200" style="background: #eee">
<image x="10" y="10" xlink:href="./icon_bg.png" />
</svg>
三、preserveAspectRatio属性
在默认情况下，如果图片设置的宽高比实际图片要小，它会进行自动缩放。例如图片实际大小为101*101，设置图片的宽高为120*50：
<svg width="400" height="150" style="background: #eee">
<image width="120" height="50" xlink:href="./icon_bg.png" />
</svg>
由于设置高度比图片小，因此图片按照设置的高度等比缩小它的宽度进行居中显示。
1、none
设置preserveAspectRatio属性为none，它会根据设置的宽高进行铺平。
<svg width="400" height="150" style="background: #eee">
<image width="120" height="50" preserveAspectRatio="none" xlink:href="./icon_bg.png" />
</svg>
2、xMinYMin
设置preserveAspectRatio属性为xMinYMin，它会等比缩放后靠左显示。
<svg width="400" height="150" style="background: #eee">
<image width="120" height="50" preserveAspectRatio="xMinYMin" xlink:href="./icon_bg.png" />
</svg>
3、xMinYMin
设置preserveAspectRatio属性为xMidYMin，它会等比缩放后居中显示。
<svg width="400" height="150" style="background: #eee">
<image width="120" height="50" preserveAspectRatio="xMidYMin" xlink:href="./icon_bg.png" />
</svg>
4、xMaxYMin
设置preserveAspectRatio属性为xMidYMin，它会等比缩放后靠右显示。
<svg width="400" height="150" style="background: #eee">
<image width="120" height="50" preserveAspectRatio="xMaxYMin" xlink:href="./icon_bg.png" />
</svg>
5、其它属性值
以此类推，它的属性值都是用来控制图片缩放后显示的位置，属性值列表如下：
(1)xMinYMin：左上
(2)xMidYMin：中上
(3)xMaxYMin：右上
(4)xMinYMid：左中
(5)xMidYMid：中中
(6)xMixYMid：右中
(7)xMinYMax：左下
(8)xMidYMax：中下
(9)xMixYMax：右下
五、代码链接
