SVG速记

1. 在HTML中加载SVG的方法

4. 直接在HTML中嵌入
5. 链接到SVG文件

2. SVG Shapes与主要参数

2.1 矩形

• x
• y
• width
• height
• rx
• ry

2.2 圆形

• cx
• cy
• r

2.3 椭圆

• cx
• cy
• rx
• ry

2.4 直线

• x1
• y1
• x2
• y2

2.5 多边形

• points

points="100,10 40,180 190,60 10,60 160,180"

2.6 曲线

• points

points="20,20 40,25 60,40 80,120 120,140 200,180"

2.7 路径

• 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 d="M150 0 L75 200 L225 200 Z" />

2.8 文本

• x
• y

3. SVG Stroke 属性

3.1 stroke

定义轮廓的颜色

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
  </g>
</svg>

3.2 stroke-width

定义轮廓的宽度

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
  </g>
</svg>

3.3 stroke-linecap

strokelinecap属性定义不同类型的开放路径的终结

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <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>

3.4 stroke-dasharray

strokedasharray属性用于创建虚线。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>

4. SVG 滤镜

SVG可用的滤镜是：

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

5. SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型：

• Linear
• Radial

5.1 SVG 线性渐变-linearGradient

1. 位置参数，表示渐变开始和结束的位置

• x1
• x2
• y1
• y2

2. 颜色标签，表示该位置的颜色，中间的颜色采用渐变的方式

• offset(实际百分比等于offset*x2/y2)
• style
• • stop-color
• • stop-opacity

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

5.2 SVG 放射性渐变-radialGradient

• cx
• cy
• r
• fx
• fy