•所有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属性定义圆的半径