SVG基础篇

一、了解SVG

定义：SVG是一种用XML定义的语言，用来描述二维矢量/栅格图形；SVG提供了三种类型的图形对象：矢量图形，图像，文本

优势

• SVG图形是可交互和动态
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
• SVG 可以与 JavaScript 技术一起运行

二、SVG基础

一、认识svg

// svg标签可设置宽高
// xmlns定义命名空间
// version 版本号
// circle标签创建圆形 cx,cy代表（x,y）坐标，不设置默认（0,0）r:半径 stroke:边框颜色，stroke-width：边框的宽度 fill：填充色
<svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>

二、svg的几种引入方式

• 使用 <embed> 标签

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

• 使用<object>标签

<object data="circle1.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的几种形状

svg预定义的形状元素：矩形<rect> 圆形<circle> 椭圆<ellipse> 线<line> 折线<polyline> 多边形<polygon> 路径<path>

• 矩形<rect>

<svg class="svg-rect" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect width="300" height="100" stroke="rgb(0, 0, 0)" stroke-width="2" fill="green"></rect>
</svg>
属性：width，height
stroke: 边框颜色； stroke-width: 边框宽度；fill：填充背景色；fill-opacity: 0-1，填充背景色的透明度；
stroke-opacity：0-1，边框透明度；opacity：0-1，整体透明度；x,y：坐标；rx,ry:圆角

rect.png
image.png

• 圆形<circle>

// circle标签创建圆形 cx,cy代表（x,y）坐标，不设置默认（0,0）r:半径 stroke:边框颜色，stroke-width：边框的宽度 fill：填充色
<svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>

circle.png
image.png

• 椭圆<ellipse>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="102" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2;"/>
</svg>
cx,cy:坐标；rx:x轴半径；yx:y轴半径

ellipse.png
image.png

• 直线<line>

<svg class="line" 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 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
1:开始；2：结束；

image.png

• 多边形<polygon>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
fill-rule: 用于复杂相交的图形如何判断其内部
属性值：nonzero ‘非零’ evenodd ‘奇偶’

polygon.png
image.png

• 曲线 <polyline>

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

polyline.png
image.png

• 路径<path>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>
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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

path.png

• 文本

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

• stroke属性

stroke: 边框颜色； stroke-width: 边框宽度； stroke-dasharray:5,5; 创建虚线；
stroke-linecap：butt/round/square 不同类型的开放路径的终结

四、滤镜

• 模糊效果

<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)" />
<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
<rect>元素的滤镜属性用来把元素链接到"f1"滤镜

• 阴影

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

持续更新中........