svg 颜色

<a>颜色的用法</a>
常用的blue,rgb rgba,#fff还有就是渐变<br />
渐变一般放在复用标签内，用fill或stroke通过指定url(#id)来使用渐变<br />
渐变颜色和比例通过stop设置，offset设置百分比，<br />
stop-color设置颜色，stop-opacity:设置透明度<br />
x1 y1 x2 y2 设置渐变的方向，默认是水平渐变值是0-1<br />
top标签可以应用 class类，在css里设置颜色透明度。<br />
形状标签可以添加id，css里为id设置fill stroke<br />

渐变色成员的复用：你也可以使用xlink:href引用定义过的渐变色成员，xlink:href="#Gradient1"<br />

<svg width="120" height="240">
 <defs>
     <radialGradient id="Gradient3">
       <stop offset="0%" stop-color="red"/>
       <stop offset="100%" stop-color="blue"/>
     </radialGradient>
     <radialGradient id="Gradient4" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25" spreadMethod="reflect">
       <stop offset="0%" stop-color="red"/>
       <stop offset="100%" stop-color="blue"/>
     </radialGradient>
 </defs>
 
 <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/> 
 <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient4)"/> 
</svg>
radialGradient：环形渐变，<br />
也是用stop来设置颜色默认是从中心到外的渐变<br />
cx cy r 设置渐变的圆心和半径。值是0-1<br />
fx fy定义颜色最浓的位置,<br />
spreadMethod:定义渐变到了终点后的操作，默认是pad,还有reflect repeat<br />

 #rect1 { fill: url(#Gradient1); }  
       .stop1 { stop-color: red; }  
       .stop2 { stop-color: black; stop-opacity: 0; }  
       .stop3 { stop-color: blue; } 

pattern：定义形状纹理，<br />
它需要定义在复用标签内，它标签内可以创建一些形状。并为这些形状设置颜色或引用渐变。<br />
它们组成的图形最后应用到形状的fill stroke上<br />
x y width height定义开始的x y 宽高。值是0-1也就是相对于使用它的图形的大小 。还有就是用固定的值<br />
内定义了一些图形标签，为它们应用了渐变。<br />

<svg width="200" height="200">
 <defs>
   <linearGradient id="Gradient6">
     <stop offset="0%" stop-color="white"/>
     <stop offset="100%" stop-color="blue"/>
   </linearGradient>
   <linearGradient id="Gradient7" x1="0" x2="0" y1="0" y2="1">
     <stop offset="0%" stop-color="red"/>
     <stop offset="100%" stop-color="orange"/>
   </linearGradient>
 </defs>
 <defs>
   <pattern id="Pattern" x=".05" y=".05" width=".25" height=".25">
     <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
     <rect x="0" y="0" width="25" height="25" fill="url(#Gradient7)"/>
     <circle cx="25" cy="25" r="20" fill="url(#Gradient6)" fill-opacity="0.5"/>
   </pattern> 
 </defs>
 
 <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
</svg>