快捷导航

栏目导航

SVG <radialGradient>径向渐变

2018-2-6 01:44| 发布者: admin| 查看: 983| 评论: 0|来自: 钱柜手机网页版

径向渐变通俗的讲就是渐变沿着圆形半径方向进行。

<radialGradient>元素可以定义一个径向渐变。

径向渐变的属性基本与线性渐变相同,具体参阅SVG <linearGradient>线性渐变一章节。

当然径向渐变也有独有的属性,下面就通过代码实例分别做一下介绍:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:500px;
  height:400px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
                      fx="40%" fy="50%"
                      cx="50%" cy="50%"
                      r="50%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="400" height="300" fill="url(#radial)" />
  </svg>                           
</body>
</html>

<radialGradient>元素的id、spreadMethod、gradientTransform和gradientUnits属性的作用与线性渐变完全相同。

<stop>元素和它的属性功能和线性渐变也是完全相同的。

下面介绍一下<radialGradient>径向渐变独有的一些属性:

一.cx、cy和r:

cx和cy属性用来规定径向渐变的圆心位置,r用来规定径向渐变的圆心半径。

这三个属性就确定了渐变的区域,看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
                      fx="50%" fy="50%"
                      cx="50%" cy="50%"
                      r="10%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
     
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
            r="80"
            fill="green"
            fill-opacity="0.2"
            />
  </svg>                           
</body>
</html>

创建一个透明圆形,所覆盖的区域是矩形元素应用渐变的区域,此区域之外都是纯蓝色(spreadMethod决定)。

二.fx和fy属性:

这两个属性用来规定渐变的焦点坐标,也就是渐变色是纯色的位置。比如上面的代码,焦点坐标在圆心位置。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
                      fx="45%" fy="50%"
                      cx="50%" cy="50%"
                      r="10%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
     
 
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
            r="80"
            fill="green"
            fill-opacity="0.2"
            />
  </svg>                           
</body>
</html>

我们向左挪动了焦点的位置,但是渐变的区域位置和大小并没有发生变化。

如果焦点位置超出了渐变区域会有什么现象呢,看下面的代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
                      fx="70%" fy="50%"
                      cx="50%" cy="50%"
                      r="10%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
     
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
            r="80"
            fill="green"
            fill-opacity="0.2"
            />
  </svg>                           
</body>
</html>

超出渐变区域的现象在实际应用中绝少出现,这里仅仅当做一个额外的知识。

在不同的浏览器中表现也不相同,在谷歌浏览器中,会形成一个与渐变区域相切的夹角,里面有渐变效果。

在火狐浏览器中则无法超出渐变区域,即使规定超出,也会被限制在边缘。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-11 13:35 , Processed in 0.099639 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部