htmlayout设计ui 基础篇：[15]svg图使用

1、第一，先拿到我们要使用的SVG图形代码，它是以.svg格式存在的

如图所示：

2、第二，这个格式的外观效果，可以直接用Sciter v.3来查看，效果如下：

3、第三，接下来，我们来看下，如何在UI布局中，把盯帮.svg的文件加进来，从而实现界面中显示svg图的效果

样式代码如下：

 section > div.few-clouds-night  

 {

background-image:url(weather-few-clouds.svg);

background-repeat:no-repeat;

background-position: 0 50%;

 background-size:64dip;

}

4、第四，正文添加代码如下：

<section>  <div class="暗爬few-clouds" >few-clouds</div></section>

效果如下：

5、第五，主要是样式中的引用，来说下代码财躲彩的意思：

1、background-image:url(weather-few-clouds.svg);和背景图片引用是一样的，只不过这里是引用.svg格式的（一样是矢量图片格式）

2、background-repeat:no-repeat;表示只显示一张图片，没有重复

3、background-position: 0 50%;表示水平左对齐，垂直居中对齐

4、background-size:64dip;表示背景图片大小

6、第五，单位说明

dip : device independent pixels(设备独立像素)

不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和 QVGA 推荐使用这个，不依赖像素。