HTML5--新增可伸缩矢量图SVG一(9)

前言：

　　这节课主要学习下HTML5中的可伸缩矢量图，只是作为一个入门认识，真正开发中需要还是通过查API比较稳妥，毕竟套路是一样的。

　　1.什么是SVG?

　　　　1>：SVG指可伸缩矢量图形(Scalable Vector Graphics)

　　　　2>：SVG用来定义用于网络的基于矢量的图形

　　　　3>：SVG使用XML格式定义图形

　　　　4>：SVG图像在放大或改变尺寸的情况下图形质量不会有损失

　　　　优势：

　　　　　　1>：SVG图像可通过文本编辑器创建或修改

　　　　　　2>：SVG图像可被搜索、索引、脚本化或压缩

　　　　　　3>：SVG是可伸缩的

　　　　　　4>：SVG图像可在任何分辨率下被高质量的打印

　　2.SVG画图举例?

　　　　SVG提供了各种各样的图形及效果，包括：圆形、矩形、椭圆形...及渐变、动画等效果

　　　　如果项目中真正需要，直接查文档

　　　　圆形举例：

　　　　　　width、height：限制svg的宽高

　　　　　　cx、cy分别表示圆心位置，r表示半径

<body>
    <svg width="300" height="100" version="1.1" >
        <circle cx="100" cy="50" r="40" stroke="black"
        stroke-width="2" fill="red" />
    </svg>
</body>

　　3.引用外部的SVG?

　　　　我们可以通过外部提供的svg资源，通过iframe的方式引入到需要的页面中

　　　　举例：

　　　　　　第一步：先创建一个svg文件(svg是用xml编写de)，命名为example.svg(注意后缀名是.svg)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <iframe src="./SVG.svg" frameborder="0"></iframe>
</body>
</html>

　　　　　　第二步：通过iframe标签引入到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <iframe src="./SVG.svg" frameborder="0"></iframe>
</body>
</html>

　　　　　　效果图：