SVG Gradients之Linear

2014-05-04 Svg

##SVG Gradients(渐变) 渐变是指从一种颜色向另外一种颜色的平滑转换。几种颜色转化能同时作用于同一个元素中。

SVG中主要有两种渐变:

  • Linear (线性渐变)
  • Radial (径向渐变)

##SVG <linearGradient> <linearGradient>元素必须嵌套在<defs>中

<linearGradient>可以定义成水平、垂直、任意角度渐变:

  • 水平渐变:y1 、y2相同, x1、x2 不同
  • 垂直渐变:x1、x2 相同, y1 、y2不同
  • 垂直渐变:x1、x2 不同, y1 、y2不同

###示例1 水平渐变,从yellow 到 red

<svg height="150" width="400">
  <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>

代码说明:

  • <linearGradient>中的x1, x2, y1,y2分别定义了渐变的起止位置
  • 渐变可以设置多个颜色,每种颜色都用<stop>指定

###示例2 垂直渐变,从yellow 到 red

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <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(#grad2)" />
</svg>

###示例3 水平渐变,从yellow 到 red,并增加了一个文本

SVG
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

SVG Filters之阴影Drop Shadows

2014-05-04 Svg

##SVG <feOffset>

###示例1

<svg height="120" width="120">
  <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>

代码解释:

  • 元素的id属性定义了滤镜的唯一名称
  • 元件的滤镜属性链接到了“f1”滤镜

###示例2 加上了 <feGaussianBlur>

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

###示例3

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

代码解释:

  • <feOffset> 元素改成了”SourceAlpha”虚化中的Alpha通道代替了RGBA像素

###示例4

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <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="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

代码解释:

  • <feColorMatrix> 转换颜色,使偏移图片的颜色值接近空(0)
  • 矩阵中三个’0.2’是获取了red、green、blue 通道

SVG Filters之虚化Blur Effects

2014-05-04 Svg

##SVG 滤镜 在 SVG 中,可用的滤镜有:

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

注意:

  • 您可以在每个 SVG 元素上使用多个滤镜!
  • IE 、Safari浏览器暂不支持滤镜!

##虚化Blur Effects; <filter>标签用来定义 SVG 滤镜。<filter>标签使用必需的 id 属性来定义向图形应用哪个滤镜? <filter>标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。

###SVG <feGaussianBlur>

####示例1

<svg height="110" width="110">
  <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>

代码解释:

  • 元素的id属性定义了滤镜的唯一名称
  • 元素定义了虚化效果
  • 在in=“SourceGraphic”部分定义了在整个元素中创建的效果
  • 该stdDeviation属性定义虚化的值
  • 元件的滤镜属性链接到了“f1”滤镜

SVG Stroke 属性

2014-05-04 Svg

##9.Stroke 属性 SVG stroke拥有很多属性,下面只重点讲一部分:

###stroke

stroke用来定义line、text或者元素的outline等的颜色

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

###stroke-width stroke-width用来定义line、text或者元素的outline等的厚度

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

###stroke-linecap stroke-linecap定义线条结尾的不同样式

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="16">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

###stroke-dasharray stroke-dasharray定义断续线

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

###stroke-opacity stroke-opacity不透明度

欢迎光临www.waylau.com
<svg width="500" height="120">
<text x="22" y="40">欢迎光临www.waylau.com</text>
<path d="M20,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.3;
             " />
<path d="M80,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.7;
             " />
<path d="M140,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 1;
             " />
</svg>

参考:http://tutorials.jenkov.com/svg/stroke.html http://www.w3schools.com/svg/svg_stroking.asp


SVG <text>文本

2014-05-04 Svg

##8.文本 <text>

####示例8.1 写一个文本:

欢迎访问wwww.waylau.com
 <svg height="30" width="200">
  <text x="0" y="15" fill="red">欢迎访问wwww.waylau.com </text>
</svg>

####示例8.2 让文本转个角度:

欢迎访问wwww.waylau.com
<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(10 20,40)">欢迎访问wwww.waylau.com</text>
</svg>

####示例8.3 让文本引用path:

欢迎访问www.waylau.com个人博客欢迎访问www.waylau.com
<svg width="500" height="220">
 <defs>
   <path id="myTextPath2"
   d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>

<text x="10" y="100" style="stroke: #000000;">
   <textPath xlink:href="#myTextPath2">
   欢迎访问www.waylau.com个人博客欢迎访问www.waylau.com
  </textPath>
</text>  
</svg>

####示例8.4

可以使用 <tspan> 将文本元素分成几部分,允许每部分有各自的样式

Several lines: 欢迎访问 wwww.waylau.com
<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">欢迎访问</tspan>
    <tspan x="10" y="70">wwww.waylau.com</tspan>
  </text>
</svg>

####示例8.5 使用 <a> 使文本变成一个链接

欢迎访问wwww.waylau.com
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.waylau.com" target="_blank">
    <text x="0" y="15" fill="red">欢迎访问wwww.waylau.com</text>
  </a>
</svg>

####示例8.6 垂直样式

欢迎访问wwww.waylau.com 欢迎访问wwww.waylau.com
<svg height="260" width="200">
<text x="10" y="10" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0;">
   欢迎访问wwww.waylau.com
</text>
<text x="110" y="10" fill="red"  style="writing-mode: tb; glyph-orientation-vertical: 90;">
   欢迎访问wwww.waylau.com
</text> 
</svg>

SVG <path>路径

2014-05-04 Svg

##7.路径 <path>

下面的命令可用于路径数据:

  • 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

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

####示例7.1 例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

####示例7.2

A B C
<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

由于绘制路径的复杂性,因此强烈建议您使用 SVG 编辑器来创建复杂的图形。推荐用开源矢量图编辑器Inkscape


SVG Shapes之多边形 <polygon>

2014-05-04 Svg

##5.多边形 <polygon>

####示例5.1

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg> **代码解释:**
  • points 属性定义多边形每个角的 x 和 y 坐标

####示例5.2

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

####示例5.3

<svg height="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

####示例5.4 fill-rule属性改为”evenodd”

<svg height="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG Shapes之折线 <polyline>

2014-05-04 Svg

##6.折线 <polyline>

####示例6.1

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

####示例6.2

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>