SVG 效果--轮廓和填充

来源:互联网 发布:阿里云邮箱登录 编辑:程序博客网 时间:2024/06/05 06:22
SVG提供了一个范围广泛stroke属性。在本章中,我们将看看下面
stroke
stroke-width
stroke-linecap
stroke-dasharray
所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓
Stroke属性定义一条线,文本或元素轮廓颜色
stroke- width属性定义了一条线,文本或元素轮廓厚度
strokelinecap属性定义不同类型的开放路径的终结,如buttroundsquare
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的缩写,它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平,垂直或角渐变
y1y2相等,而x1x2不同时,可创建水平渐变
x1x2相等,而y1y2不同时,可创建垂直渐变
x1x2不同,且y1y2不同时,可创建角形渐变
<</span>linearGradient>标签的id属性可为渐变定义一个唯一的名称
<</span>linearGradient>标签的X1X2Y1Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。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"/>

cxcy属性定义圆点的xy坐标。如果省略cxcy,圆的中心会被设置为(0, 0)
r属性定义圆的半径