阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 渐变 - 线性

      SVG 渐变 - 线性


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

      SVG渐变主要有两种类型:

      • Linear
      • Radial

      SVG 线性渐变 - <linearGradient>

      <linearGradient>元素用于定义线性渐变。

      <linearGradient>标签必须嵌套在<defs>的内部。

      <defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。

      线性渐变可以定义为水平,垂直或角渐变:

      • 当y1和y2相等,而x1和x2不同时,可创建水平渐变
      • 当x1和x2相等,而y1和y2不同时,可创建垂直渐变
      • 当x1和x2不同,且y1和y2不同时,可创建角形渐变

      实例 定义水平线性渐变从黄色到红色的椭圆形:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      </svg>
      

      代码解析:

      • <linearGradient>标签的id属性可为渐变定义一个唯一的名称
      • <linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置
      • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
      • 填充属性把 ellipse 元素链接到此渐变

      实例 定义一个垂直线性渐变从黄色到红色的椭圆形:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
      </svg>
      

      实例 椭圆形+文本

      定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本:

      SVG

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
        <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
      </svg>
      

      代码解析:

      • <text> 元素是用来添加一个文本

      基本示例

      <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="Gradient1">
              <stop class="stop1" offset="0%"/>
              <stop class="stop2" offset="50%"/>
              <stop class="stop3" offset="100%"/>
            </linearGradient>
            <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stop-color="red"/>
              <stop offset="50%" stop-color="black" stop-opacity="0"/>
              <stop offset="100%" stop-color="blue"/>
            </linearGradient>
            <style type="text/css"><![CDATA[
              #rect1 { fill: url(#Gradient1); }
              .stop1 { stop-color: red; }
              .stop2 { stop-color: black; stop-opacity: 0; }
              .stop3 { stop-color: blue; }
            ]]></style>
        </defs>
       
        <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
        <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
        
      </svg>
      

      以上是一个应用了线性渐变的<rect>元素的示例。线性渐变内部有几个<stop> 结点,这些结点通过指定位置的offset(偏移)属性和stop-color(颜色中值)属性来说明在渐变的特定位置上应该是什么颜色;可以直接指定这两个属性值,也可以通过CSS来指定他们的值,该例子中混合使用了这两种方法。例如:该示例中指明了渐变开始颜色为红色,到中间位置时变成半透明的黑色,最后变成蓝色。

      虽然你可以根据需求按照自己的喜好插入很多中间颜色,但是偏移量应该始终从0%开始(或者0也可以,百分号可以扔掉),到100%(或1)结束。如果stop设置的位置有重合,将使用XML树中较晚设置的值。而且,类似于填充和描边,你也可以指定属性stop-opacity来设置某个位置的半透明度(同样,对于FF3你也可以设置rgba值)。

      <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
      

      使用渐变时,我们需要在一个对象的属性fill或属性stroke中引用它,这跟你在CSS中使用url引用元素的方法一样。在本例中,url只是一个渐变的引用,我们已经给这个渐变一个ID——“Gradient”。要想附加它,将属性fill设置为url(#Gradient)即可。现在对象就变成多色的了,也可以用同样的方式处理stroke。

      <linearGradient>元素还需要一些其他的属性值,它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制,它们分别是属性x1、x2、y1和y2,这些属性定义了渐变路线走向。渐变色默认是水平方向的,但是通过修改这些属性,就可以旋转该方向。下例中的Gradient2创建了一个垂直渐变。

      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      

      注意: 你也可以在渐变上使用xlink:href属性。如果使用了该属性时,一个渐变的属性和颜色中值(stop)可以被另一个渐变包含引用。在下例中,你就不需要再Grandient2中重新创建全部的颜色中值(stop)。

      <linearGradient id="Gradient1">
         <stop id="stop1" offset="0%"/>
         <stop id="stop2" offset="50%"/>
         <stop id="stop3" offset="100%"/>
       </linearGradient>
       <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
          xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
      
      目录
      目录