财神爷北京pk10计划软件手机版下载: SVG之颜色、渐变和笔刷的使用

一、颜色

北京赛车pk10软件计划手机版下载 www.3gt5.cn   我们之前使用英文来表示颜色并进行填充,比如:

  • <circle cx="800" cy="120" r="110" stroke="black" stroke-width="2" fill="red" />

     这些颜色都很简单所以用起来很方便,但是复杂的颜色就不行了,英文单词无法描述某些颜色,所以现在我们需要使用将要学习的rgb和hsl来进行颜色表示。

  1、RGB

  RGB即Red、Green、Blue三种颜色的缩写,RGB即使用红、绿、蓝三种颜色进行组合叠加来表示颜色的一种颜色标准。

  RGB在网页中的使用:

  网页颜色是以16进制代码表示,一般格式为#DEFABC (字母范围从A-F,数字从0-9 );如黑色,在网页代码中便是:#000000(在css编写中可简写为#000)。当颜色代码为#AABB11时,可以简写为#AB1表示,如#135与#113355表示同样的颜色。此外RGB还有很多其他格式,比如:

  

  

  我们发现,我们如果没有取色工具,想要使用RGB表示我们想要的颜色我们需要进行大量的数据测试,且光凭肉眼判断并不准确。

  下面我们具体的来画个图:

  • <!DOCTYPE html>
    <html>
    <head>
        <title>rgbDemo</title>
    </head>
    <body>
        <svg id="svg" xmlns="//www.w3.org/2000/svg" version="1.1" width="1400" height="500">
            <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="rgb(255,0,0)" />
            <circle cx="200" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,255,0)" />
            <circle cx="400" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,0,255)" />
        </svg>
    </body>
    </html>

     

  2、HSL

  HSL是另一种色彩模式是工业界的颜色标准,是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色相,饱和度,明度三个通道的颜色。

  

  

  同样的我们可以简单测试一下:

  • <!DOCTYPE html>
    <html>
    <head>
        <title>hslDemo</title>
    </head>
    <body>
        <svg id="svg" xmlns="//www.w3.org/2000/svg" version="1.1" width="1400" height="500">
            <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="hsl(120,10%,10%)" />
            <circle cx="200" cy="200" r="110" stroke="black" stroke-width="2" fill="hsl(200,50%,50%)" />
            <circle cx="400" cy="200" r="110" stroke="black" stroke-width="2" fill="hsl(250,80%,80%)" />
        </svg>
    </body>
    </html>

     

  3、透明度

  如果我们希望看到有透明度的色彩,只需要使用rgba()、hsla()或者opacity属性即可,其中a表示透明度。

  

  简单的栗子:

  •  1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>透明度</title>
     5 </head>
     6 <body>
     7     <!--svg-->
     8     <svg id="svg" xmlns="//www.w3.org/2000/svg" version="1.1" width="1400" height="500">
     9         <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="rgba(255,0,0,0.5)" />
    10         <circle cx="240" cy="200" r="110" stroke="black" stroke-width="2" fill="hsla(120,100%,50%,0.5)" />
    11         <circle cx="380" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,0,255)" opacity="0.5"/>
    12     </svg>
    13 </body>
    14 </html>

     

二、渐变

  上面的某个元素都是整体颜色,下面我们来学习如何制作渐变色,就像这样色的:

  

  1、线性渐变

   线性渐变就是按照直线的方向进行颜色渐变。在SVG中我们使用<linearGradient>标签和<stop>标签进行线性渐变处理:

  

  下面我们看实例:

  •  1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>线性渐变</title>
     5 </head>
     6 <body>
     7     <svg id="svg" xmlns="//www.w3.org/2000/svg" version="1.1" width="1400" height="500">
     8         <defs>
     9             <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
    10                 <stop offset="0" stop-color="red" />
    11                 <stop offset="1" stop-color="blue" />
    12             </linearGradient>
    13         </defs>
    14         <rect x="50" y="50" width="300" height="150" fill="url(#grad1)" />
    15     </svg>
    16 </body>
    17 </html>

  其中的标签说明:  

  首先我们使用<defs>标签进行预定义,即我们将描述的线性渐变先存放在<defs>标签中以供使用。

  然后是<linearGradient>标签,这是真正描述线性渐变的标签,其中x1,y1、x2,y2分别是渐变的起点和终点坐标,(0,0)表示图形标签的最左端,(1,1)表示图形标签的最右端。

  <linearGradient>标签中使用了<stop>标签,这是用来设置渐变色的终点的。比如offset=0,stop-color="red"就表示最左端点颜色为red,然后offset=1,stop-color="blue",就表示最右端颜色为blue,然后根据渐变起点坐标和终点坐标的设置(0,0)到(1,1),然后就形成了从最左端到最右端,红色到蓝色的线性渐变效果。

  说明:<linearGradient>默认的坐标系不是世界坐标系,并且上面已经说明(0,0)表示图形标签的最左端,(1,1)表示图形标签的最右端。如果我们想使用世界坐标系或者说用户坐标系作为渐变坐标,我们可以使用gradientUnits="userSpaceOnUse"属性来进行设置。如:

  • <defs>
        <linearGradient id="grad1" x1="100" y1="100" x2="200" y2="200" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="red" />
            <stop offset="1" stop-color="blue" />
        </linearGradient>
    </defs>

  2、径向渐变

  径向渐变就是从给定起点进行圆形渐变。在SVG中使用<redialGradient>标签和<stop>标签进行径向渐变处理: