JavaScript半知半解
欢迎使用 牛骨文在线手册
当前位置： 牛骨文教育服务平台 > 学习手册 > Web前端开发 > 脚本Javascript 》 JavaScript半知半解 》 SVG

SVG

SVG：可伸缩的矢量图形

这里只是简要的介绍一下SVG，如要深入，推荐看《SVG经典入门》

1、SVG

1.1 概述

SVG是一种用于描述图形的XML语法。由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。

一个简单的SVG文件如下：

<svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">
  <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>
</svg>

1.2 使用方法

要使用SVG有很多方法，最简单的就是直接将SVG代码嵌入到HTML中：

<body>
  <svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">     <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>   
  </svg>
</body>

SVG代码也可以单独写在一个文件中，后缀是“.svg”，然后用在<img>、<object>、<embed>、<iframe>等标签，以及CSS的background-image属性，将这个文件插入网页。

<img src="example.svg">

<object data="example.svg" type="image/svg+xml"></object>

<embed src="example.svg" type="image/svg+xml">

<iframe src="example.svg"></iframe>

1.3 基本图形

（1）矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10" y="20" rx="5" ry="5"  width="200" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;opacity:0.5" />
</svg>

属性说明：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性

  • fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • fill-opacity属性定义填充颜色的透明度
  • stroke-width 属性定义矩形边框的宽度
  • stroke 属性定义矩形边框的颜色
  • stroke-opacity属性定义笔触颜色的透明度
  • opacity属性定义元素的透明度
  • rx和ry属性定义矩形圆角

下面的其他图形都支持style属性，而且可以单独作为属性添加。

（2）圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

属性说明：

  • cx和cy属性定义圆点的x和y坐标，如果省略，则默认为(0,0)
  • r属性定义圆的半径

（3）椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

属性说明：

  • cx和cy属性定义椭圆的中心的x和y坐标
  • rx定义水平半径
  • ry定义垂直半径

（4）直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

属性说明：

  • x1和y1表示起始点的x和y坐标
  • x2和y2表示结束点的x和y坐标

（5）多边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

属性说明：

  • points属性定义多边形每个角的x和y坐标，x和y坐标之间用逗号隔开，每个坐标点之间用空格隔开

（6）曲线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>
  • points属性定义多边形每个角的x和y坐标，x和y坐标之间用逗号隔开，每个坐标点之间用空格隔开

（7）文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

（8）路径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

属性说明：

  • d属性定义一组路径数据，一对坐标值的x和y坐标之间可以用空格或逗号隔开，但坐标对与坐标对之间只能用空格分隔。
  • pathLength属性定义路径总长度，不允许负值

绘图指令：

M   moveto，表示移动，后跟着坐标点，比如150 0
L   lineto，表示连接（也可以说是绘制直线），后跟着坐标点，比如75 200
H  horizontal lineto，绘制水平线段
V vertical lineto，绘制垂直线段
C curveto，绘制普通的三次贝塞尔曲线（C x1 y1 x2 y2 destx desty）
S smooth curveto：绘制光滑的三次贝塞尔曲线（S x2 y2 destx desty）
Q quadratic Bézier curve：绘制普通的二次贝塞尔曲线
T smooth quadratic Bézier curveto：绘制光滑的二次贝塞尔曲线
A elliptical Arc：绘制椭圆弧
Z  closepath，表示完成闭合路径，即将路径首尾相连，构成闭合图形

大写表示绝对定位，小写表示相对定位。

1.4 装饰SVG

1.4.1 stroke属性

  • stroke：定义一条线，文本或元素轮廓颜色
  • stroke-width：定义了一条线，文本或元素轮廓厚度
  • stroke-linecap：定义不同类型的开放路径的终结（可能值：butt、round、square）
  • stroke-dasharray：用于创建虚线

1.4.2 滤镜

（1）模糊效果

所有的SVG滤镜都定义在<defs>元素中，
<filter>标签用来定义SVG滤镜

例子：<feGaussianBlur> 元素是用于创建模糊效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

（2）阴影

<feOffset>元素是用于创建阴影效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

1.4.3 渐变

（1）线性渐变

<linearGradient>元素用于定义线性渐变。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

（2）放射性渐变

<radialGradient>元素用于定义放射性渐变。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
文章导航