HTML5之SVG的使用

2019-03-18 本文已影响16人暖A暖

一、什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)；
SVG 用于定义用于网络的基于矢量的图形；
SVG 使用 XML 格式定义图形；
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；
SVG 是万维网联盟的标准；

二、SVG的优势

SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大；

三、使用SVG绘制圆形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
      <circle cx="200" cy="100" r="100" stroke="#afeedd"
      stroke-width="5" fill="#f0ddff" />
    </svg>
</body>
</html>

<svg>标签中height和width属性是设置SVG文档的高宽，version属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间；
<circle>是SVG中用来创建圆形的标签，cx 和 cy 属性定义圆中心的 x 和 y 坐标，如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r属性定义圆的半径；
stroke 和 stroke-width 属性控制如何显示形状的轮廓，fill 属性设置形状内的颜色；
我们看一下演示效果图：
1.png

四、使用SVG绘制矩形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1">
      <rect x="50" y="100" width="300" height="150"
      style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
    </svg>
</body>
</html>

rect 元素的 width 和 height属性可定义矩形的高度和宽度；
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）；
CSS 的 stroke-width 属性定义矩形边框的宽度；
CSS 的 stroke 属性定义矩形边框的颜色；
属性定义矩形的左侧位置，y 属性定义矩形的顶端位置
CSS 的 fill-opacity 属性定义填充颜色透明度，取值为0-1；
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度，取值为0-1；
我们看一下效果演示图：
2.png

五、使用SVG绘制多边形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
      <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#B4EEB4;stroke:#DB7093   ;stroke-width:3;fill-rule:nonzero;"/>
    </svg>
</body>
</html>

<polygon> 标签用来创建含有不少于三个边的图形，也就是多边形，多边形是由直线组成，其形状是"封闭"的；
points 属性定义多边形每个角的 x 和 y 坐标，x和y之间用逗号隔开，坐标与坐标之间用空格隔开；
fill-rule属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部”，它有三个有效值nonzero（非零）、evenodd（奇偶）、inherit，默认为nonzero；
我们来看一下效果演示图：

3.png

六、SVG模糊效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="keai" x="0" y="0">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
            </filter>
        </defs>
    <rect width="150" height="100" stroke="red" stroke-width="5"
  fill="#7EC0EE" filter="url(#keai)" />
    </svg>
</body>
</html>

<filter>元素id属性定义一个滤镜的唯一名称；
<feGaussianBlur>元素定义模糊效果；
in="SourceGraphic"这个部分定义了由整个图像创建效果；
stdDeviation属性定义模糊量；
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜，这里是一个矩形；
效果演示图：
4.png

七、SVG 阴影

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
      <defs>
        <filter id="myImg" x="0" y="0" width="200%" height="200%">
          <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
          <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
          <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
      <rect width="200" height="200" stroke="#90EE90" stroke-width="5" fill="#FFEFDB" filter="url(#myImg)" />
    </svg>
</body>

<defs>元素定义短并含有特殊元素（如滤镜）定义；
<filter>标签用来定义SVG滤镜，<filter>标签使用必需的id属性来定义向图形应用哪个滤镜；
<feOffset>元素是用于创建阴影效果；
<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色；
<feGaussianBlur>元素的stdDeviation属性定义了模糊量；
演示图：

5.png

八、SVG渐变

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
        <defs>
            <linearGradient id="yuan" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(238,210,238);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,250,205);stop-opacity:1" />
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="200" rx="150" ry="80" fill="url(#yuan)" />
    </svg>
</body>

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上；
<linearGradient>元素用于定义线性渐变，<linearGradient>标签必须嵌套在<defs>的内部；
<linearGradient>标签的id属性可为渐变定义一个唯一的名称；
<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置；
渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个<stop>标签来规定，offset属性用来定义渐变的开始和结束位置；
演示图：

6.png

HTML5之SVG的使用

一、什么是SVG？

二、SVG的优势

三、使用SVG绘制圆形

四、使用SVG绘制矩形

五、使用SVG绘制多边形

六、SVG模糊效果

七、SVG 阴影

八、SVG渐变

猜你喜欢

热点阅读