本系列文章是对于走进svg课程的总结
SVG简介
使用XML描述的矢量文件
W3C标准(1.1):http://www.w3.org/TR/SVG11/
浏览器支持情况:http://caniuse.com/#cats=SVG
SVG实例
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200">
<!--Face-->
<circle cx="100" cy="100" r="90" fill="#39F" />
<!--Eyes-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black"/>
<!--Smile-->
<path d="M 50 140 A 60 60 0 0 0 150 140"
stroke="white" stroke-width="3" fill="none" />
</svg>
效果:
SVG使用方式:
- 浏览器直接打开
- 在HTML中使用img(src=sample.svg)标签引用
- 直接在htm中使用SVG标签
- 作为CSS背景(background:url(sample.svg))
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-08-01 03:14:22