svg学习

概念

1. svg 可缩放矢量图形
2.  svg 使用xml格式定义图像

---

svg 形状

矩形

代码解释：

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
• CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
• rx 和 ry 属性可使矩形产生圆角。

例子：

---

圆形

代码解释：

• cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

• r 属性定义圆的半径。

---

椭圆

代码解释：

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

   

    
下面的例子创建了三个累叠而上的椭圆
    
    

    
    
    
下面的例子组合了两个椭圆（一个黄的和一个白的）：
    
    

    

---

线

代码解释：

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

---

多边形

代码解释：

• points 属性定义多边形每个角的 x 和 y 坐标

---

折线

---

路径

代码解释：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc
• Z = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

---

SVG 滤镜

在 SVG 中，可用的滤镜有：

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

SVG 高斯模糊

代码解释：

• 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
• filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
• 滤镜效果是通过 标签进行定义的。fe 后缀可用于所有的滤镜
• 标签的 stdDeviation 属性可定义模糊的程度
• in="SourceGraphic" 这个部分定义了由整个图像创建效果

---

SVG 渐变

SVG 线性渐变

代码解释：

• 标签的 id 属性可为渐变定义一个唯一的名称
• fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
• 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置。

SVG 放射性渐变

代码解释：

• 标签的 id 属性可为渐变定义一个唯一的名称;
• fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，
• cx、cy 和 r 属性定义外圈，
• fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
• 每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置

 

---