svg初学

圆形

 

<ellipse> 标签  椭圆

<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

 

 

 

 

 

 

 

 

 

 

 

 

线段

 

<polygon> 标签用来创建含有不少于三个边的图形。多边形

 

 

<polyline> 标签用来创建仅包含直线的形状。折线

 

<path>路径 用来定义路径

 

 

以下命令用于路径数据

 

M  moveto

L lineto

H horizontal lineto

V vertical lineto

C curveto

S smooth curveto

Q quadratic Belzier curveto

T smooth quadratic Belzier curveto 

 

A elliptical Arc 

Z closepath

 

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

SVG 滤镜用来向形状和文本添加特殊的效果。

在 SVG 中，可用的滤镜有：

· feBlend 

· feColorMatrix 

· feComponentTransfer 

· feComposite 

· feConvolveMatrix 

· feDiffuseLighting 

· feDisplacementMap 

· feFlood 

· feGaussianBlur 

· feImage 

· feMerge 

· feMorphology 

· feOffset 

· feSpecularLighting 

· feTile 

· feTurbulence 

· feDistantLight 

· fePointLight 

· feSpotLight 

注释：1.您可以在每个 SVG 元素上使用多个滤镜；

2.必须在 <defs> 标签中定义 SVG 滤镜。

 

高斯模糊（Gaussian Blur）

<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

 

 

Key：

1.SVG 渐变必须在 <defs> 标签中进行定义。

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

3.在 SVG 中，有两种主要的渐变类型：线性渐变，放射性渐变； 

 

线性渐变实例

<linearGradient> 可用来定义 SVG 的线性渐变。

<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

· 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变 

· 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变 

· 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变 

 

水平渐变

 

垂直渐变

 

 

放射性渐变实例

  <radialGradient> 用来定义放射性渐变。

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。