Browse Month: 六月 2015

SVG 概念了解

SVG 可缩放矢量图形,使用XML描述二维图形和绘图程序的语言

形状

预定义形状
– 矩形
– 圆形
– 椭圆
– 线 – 折线 – 多边形 – 路径

形状属性与样式
– width 宽
– height 高
– x 形状向右位置
– y 形状向下位置
– x1, y1 线条的开始
– x2, y2 线条的结束
– rx 使形状产生圆角,水平直径
– ry 使形状产生圆角,垂直直径
– cx 圆点的 x 坐标
– cy 圆点的 y 坐标
– stroke 边框颜色
– stroke-width 边框宽度
– stroke-opacity 边框颜色的透明度(合法的范围是:0 – 1)
– fill 填充颜色
– fill-opacity 填充颜色透明度
– 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

滤镜

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

  • 定义特殊元素

  • 定义滤镜
  • 高斯滤镜
    • in 由整个图形创建效果
    • stdDeviation 定义模糊程度

渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡

线性渐变
定义线性渐变
– x1, y1 定义渐变开始位置
– x2, y2 定义渐变开始位置
定义渐变起始效果

放射性渐变

– cx、cy 和 r 属性定义外圈
– fx 和 fy 定义内圈