SVG 效果--轮廓和填充

•SVG提供了一个范围广泛stroke 属性。在本章中，我们将看看下面：

–stroke

–stroke-width

–stroke-linecap

–stroke-dasharray

•所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。

•Stroke属性定义一条线，文本或元素轮廓颜色

•stroke- width属性定义了一条线，文本或元素轮廓厚度

•strokelinecap属性定义不同类型的开放路径的终结，如butt、round、square

•Stroke-dasharray属性用于创建虚线

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

 

   

   

 

    dasharray="5,5" d="M5 20 l215 0" />

    dasharray="10,10" d="M5 40 l215 0" />

    dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />

 

•SVG渐变主要有两种类型：

•Linear：线性

•Radial：放射性

  <</span>defs>   

<</span>linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <</span>stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

      stop-color:rgb(255,0,0);stop-opacity:1" />

    </</span>linearGradient>

  </</span>defs>

  rx="85" ry="55" fill="url(#grad1)" />

  <</span>defs>   

<</span>linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <</span>stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

      stop-color:rgb(255,0,0);stop-opacity:1" />

    </</span>linearGradient>

  </</span>defs>

  rx="85" ry="55" fill="url(#grad1)" />

 <</span>defs>

    <</span>radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

      stop-color:rgb(255,255,255);

      stop-opacity:0" />

      stop-color:rgb(0,0,255);stop-opacity:1" />

    </</span>radialGradient>

  </</span>defs>

  rx="85" ry="55" fill="url(#grad1)" />

•<</span>linearGradient>元素用于定义线性渐变标签必须嵌套在<</span>defs>的内部。<</span>defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平，垂直或角渐变：

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

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

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

•<</span>linearGradient>标签的id属性可为渐变定义一个唯一的名称

•<</span>linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置

•渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset属性用来定义渐变的开始和结束位置。

•填充属性把 ellipse 元素链接到此渐变

•<</span>radialGradient>元素用于定义放射性渐变。

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

•<</span>radialGradient>元素用于定义放射性渐变。

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

 

  stroke-width="2" fill="red"/>

•cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)

•r属性定义圆的半径