svg的渐变元素用法

最新推荐文章于 2024-07-25 11:52:08 发布

比丝甘特

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1.6k

点赞数 8

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/zhengsr12345/article/details/135761380

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

svg中的渐变元素有两种，分别是线性渐变<linearGradient>和径向渐变<radialGradient>。这两种渐变作为背景被填充时都需要用url的形式导入到具体元素中。

1、线性渐变<linearGradient>

主要属性有x1、y1、x2、y2，分别表示水平渐变起点、垂直渐变起点、水平渐变终点、垂直渐变终点，都是以左上角作为原点进行偏移，其值一般用百分比表示。渐变只发生在起点和终点范围内，在范围外则按原色处理。这几个属性实际上只是渐变起点和终点的第一级，内部元素<stop>中的offset属性会影响渐变起点和终点的第二级。这几个属性还能调整渐变的角度，具体表现为：

当x1、x2为任意值，y1=y2=0时，表现为水平渐变。
当y1、y2为任意值，x1=x2=0时，表现为垂直渐变。
对于其他情况，则表现为斜向渐变，且渐变向量(x，y) = 终止偏移量(x，y) - 起始偏移量(x，y)，与以左上角为原点的坐标系夹角为arctan(y/x)，正值斜向下。

这里渐变内部的<stop>元素，该元素是渐变必须的，且至少要两个才能画出渐变。其中两个重要属性offset和stop-color，分别表示渐变第二级的偏移点和停止颜色。渐变第二级的偏移点是建立在第一级的范围内的，相邻两个颜色的offet依次分别表示起始偏移点和终止偏移点。第一个偏移点的前侧和最后一个偏移点的后侧因为没有其他元素则不发生偏移。

以下是svg的水平线性渐变的一个案例：

    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!--关键定义-->
        <linearGradient id="grad" x1="10%" x2="85%" y1="0" y2="0">
          <stop offset="20%" stop-color="#35fe98"></stop>
          <stop offset="70%" stop-color="#ea73f4"></stop>
        </linearGradient>
      </defs>

      <rect x="40" y="40" width="200" height="200" fill="url(#grad)"></rect>

      <path d="M 40,36 l 0,-10 M 42,31 l 80,0 M 240,36 l 0,-10 M 238,31 l -80,0"
        stroke="#464646" 
      />
      <text x="128" y="36" font-size="15px">200</text>

      <path d="M 60,236 l 0,-10 M 62,231 l 20,0 M 210,236 l 0,-10 M 208,231 l -20,0"
        stroke="#464646"
      />
      <text x="90" y="234" font-size="15px">200*75%=150</text>

      <path id="arrow" 
          d="M 60,245 l -8,8 m 8,-8 l 8,8 m -8,-8 l 0,20" 
          fill="none"  
          stroke="#333333"
          stroke-width="2"
        />
      <text x="10" y="280" font-size="13px">x1(200*10%)</text>

      <use href="#arrow" transform="translate(150,0)"></use>
      <text x="190" y="280" font-size="13px">x2(200*85%)</text>

      <path id="arr"
        d="M 90,245 l -8,8 m 8,-8 l 8,8 m -8,-8 l 0,50"
        fill="none"  
        stroke="#484848"
      />
      <text x="20" y="310" font-size="13px">offset1(150*20%)</text>

      <use href="#arr" transform="translate(75,0)"></use>
      <text x="140" y="310" font-size="13px">offset2(150*70%)</text>
    </svg>

以下是斜向渐变的一个案例：

    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!--关键定义-->
        <linearGradient id="grad" x1="10%" x2="85%" y1="50%" y2="20%">
          <stop offset="20%" stop-color="#35fe98"></stop>
          <stop offset="70%" stop-color="#ea73f4"></stop>
        </linearGradient>
      </defs>

      <rect x="40" y="40" width="200" height="200" fill="url(#grad)"></rect>

      <path d="M 40,36 l 0,-10 M 42,31 l 80,0 M 240,36 l 0,-10 M 238,31 l -80,0"
        stroke="#464646" 
      />
      <text x="128" y="36" font-size="15px">200</text>

      <path d="M 36,40 l -10,0 M 31,42 l 0,80 M 36,240 l -10,0 M 31,238 l 0,-80"
        stroke="#464646" 
      />
      <text x="36" y="128" font-size="15px" transform="rotate(90,36,128) translate(0,12)">200</text>

      <path d="M 40,40 l 20,100 -6,-10 m 6,10 l 2,-12" fill="none" stroke="#333333"></path>
      <text x="55" y="90">起始</text>
      <path d="M 40,40 l 170,40 -12,2 m 12,-2 l -9,-8" fill="none" stroke="#333333"></path>
      <text x="110" y="80">终止</text>
      <path d="M 60,140 L 210,80 m -50,20 l -12,-1 m 12,2 l -6,8" fill="none" stroke="#333333"></path>
      <text x="120" y="130">合成(150, -60) = </text>
      <text x="80" y="150" font-size="13">终止(200*85% , 200*20%) - </text>
      <text x="80" y="175" font-size="13">起始(200*10% , 200*50%)</text>
      <text x="42" y="200" font-size="12">角度为arctan(-60/150)=-21.8°斜向上</text>
    </svg>

2、径向渐变<radialGradient>

径向渐变与线性渐变用法类似。主要是两组属性：

cx、cy、r：表示渐变终止圆，值用百分比表示，相对于绘图元素的边界矩形。
fx、fy、fr：表示渐变起始圆，值用百分比表示，相对于绘图元素的边界矩形。

以下是径向渐变的一个案例：

    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!--关键定义-->
        <radialGradient id="grad" cx="35%" cy="40%" r="30%" fx="20%" fy="35%" fr="5%">
          <stop offset="0%" stop-color="#ffffff"></stop>
          <stop offset="100%" stop-color="#333333"></stop>
        </radialGradient>
      </defs>

      <circle cx="160" cy="160" r="100" fill="url(#grad)"></circle>
      
      <circle cx="130" cy="140" r="60" fill="none" stroke="red"></circle>
      <text x="140" y="220" font-size="13" fill="red">终止圆</text>
      <text x="120" y="240" font-size="13" fill="red">(130,140),r=60</text>
      <circle cx="100" cy="130" r="10" fill="none" stroke="blue"></circle>
      <text x="110" y="160" font-size="13" fill="blue">起始圆</text>
      <text x="90" y="180" font-size="13" fill="blue">(110,160),r=10</text>
    </svg>

最后，讲一个渐变元素上的gradientTransform属性，该属性可以对渐变进行变换，用法和css的transform类似。案例如下：

    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!--关键定义-->
        <radialGradient id="grad" cx="35%" cy="40%" r="30%"
        gradientTransform="translate(0,-0.1) scale(1.5,1) skewX(-10) skewY(-10)">
          <stop offset="0%" stop-color="#ffffff"></stop>
          <stop offset="100%" stop-color="#333333"></stop>
        </radialGradient>
      </defs>

      <circle cx="160" cy="160" r="100" fill="url(#grad)"></circle>
    </svg>