SVG 学习

SVG 在 HTML 中

使用embed标签

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

使用object标签

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

使用iframe标签

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

直接在HTML嵌入SVG代码

<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>

链接到SVG文件

<a href="circle1.svg">View SVG file</a>

SVG 形状

• 矩形 <rect>

<rect x="" y="" rx="" ry="" width="" height="" style="fill:x;stroke:x;stroke-width:x;[fill-][stroke-]opacity:x"/>

x, y —> 横纵坐标
rx, ry —> 圆角
width, height —> 长和宽
fill —> 填充色
stroke —> 描边线颜色
stroke-width —> 描边线宽
fill-opacity —> 填充色透明度
stroke-opacity —> 描边色透明度
opacity —> 整体透明度

• 圆形 <circle>

<circle cx="" cy="" r="" style=""/>

cx, cy —> 横纵坐标
r —> 半径
style —> 样式

• 椭圆 <ellipse>

<ellipse cx="" cy="" rx="" ry="" style=""/>

cx, cy —> 横纵坐标
rx, ry —> 长短半轴
style —> 样式

• 线 <line>

<line x1="0" y1="0"
      x2="100" y2="100"
      stroke="#000"
      stroke-width="2"/>

x1, y1 —> 起点坐标
x2, y2 —> 终点坐标
stroke —> 颜色
stroke-width —> 线宽

• 多边形 <polygon>

<polygon points="x,x y,y z,z ..." style="fill:x;stroke:x;stroke-width:x;fill-rule:nonzero/evenodd"/>

points —> 点坐标
fill-rule:nonzero —> 字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
fill-rule:evenodd —> 字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。

• 折线 <polyline>

<polyline points="x,x y,y z,z ..." style="fill:none;stroke:x;stroke-width:x"/>

points —> 点坐标

• 路径 <path>

<path d=""
      fill="" stroke="" stroke-width="" />

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

SVG 文本

普通文本

<text x=""  y="" style="">some text</text>

旋转文本

<text x=""  y="" style="" transform="rotate(X,Y,Z)">some text</text>

路径文本

<defs>
  <path id="path1" d="" />
</defs>

<text x="" y="" style="">
  <textPath xlink:href="#path1">some text</textPath>
</text>

分组文本

<text x="" y="" style="">Several lines:
  <tspan x="" y="">First line</tspan>
  <tspan x="" y="">Second line</tspan>
</text>

链接文本

<a xlink:href="" target="_blank">
  <text x="" y="" fill="">some text</text>
</a>

SVG Stroke 属性

• stroke
  定义一条线

• stroke-width
  定义线宽

• stroke-linecap
  定义不同的末端：
  • butt —> 无样式/截断
  • round —> 圆形端
  • square —> 方形端

• stroke-dasharray
  用于创建虚线

SVG 滤镜

• feBlend - 与图像相结合的滤镜
• feColorMatrix - 用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - 过滤阴影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - 用于照明过滤
• fePointLight - 用于照明过滤
• feSpotLight - 用于照明过滤

SVG 模糊效果

<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> 

代码解析：

• 滤镜定义放置在<defs>当中
• <filter>标签指定所需滤镜
• <feGaussianBlur>定义模糊效果
• in="SourceGraphic定义了由整个图像创建效果
• stdDeviation定义模糊量
• 最后在<rect>元素中链接滤镜

SVG 阴影

相关元素：

• <feOffset>
• <feBlend>

注：结合元素模糊可以达到更好的阴影效果

SVG 渐变

两种类型：

• Linear
  • <linearGradient> —> 线性渐变
• Radial
  • <radialGradient> —> 放射性渐变