SVG <radialGradient> 径向渐变

2018-11-8 15:04| 作者: admin| 查看: 54| 评论: 0|来自: 蚂蚁部落

径向渐变通俗的讲,以某一点为圆心,颜色值沿着半径方向渐变。

使用<radialGradient>元素可以创建一个SVG的径向渐变。

与径向渐变相对应的是线性渐变,具体参阅SVG <linearGradient> 线性渐变一章节。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150543szvi1gc9499oc0qk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一个非常简单的径向渐变效果。

<radialGradient>元素与<linearGradient>元素具有很多同名属性或者子元素。

它们的功能原理是一致的,本文不再累赘,具体用法参阅SVG <linearGradient> 线性渐变一章节。

下面结合代码介绍一下<radialGradient>元素所独有的属性。

一.cx、cy和r属性:

文章开头介绍过,径向渐变是以某一点为圆心,颜色值沿着半径方向渐变。

那么我们需要确立镜像渐变的圆心坐标和半径尺寸。代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150619kzwak6nogg6kpzg1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).cx与cy分别确定圆心的横坐标和纵坐标、

(2).r规定圆的半径尺寸。

(3).使用<rect>元素绘制一个与径向渐变同尺寸的具有透明度的圆,然后将其覆盖于径向渐变之上,以此便于观察<radialGradient>元素的cx、cy和r属性的功能。

二.fx和fy属性:

上一段代码演示的是从圆心开始向外规则的渐变,但并不是所有的规则都是如此。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150653icc2wh343e9x4lv4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

为了便于观察效果,上面同样覆盖了一个具有透明度的圆。

可以看到此次渐变的起始点并不在圆心位置。

代码分析如下:

(1).fx与fy属性用来规定渐变焦点坐标。

(2).焦点通俗的说就是渐变的起点位置,此位置处颜色值保持最初状态。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150722d583ay98kbl88g79.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通常情况下fx与fy规定的焦点位于圆内,当然也可以将其坐标设置在圆的范围之外。

但是并不推荐进行如此操作,不同的浏览器可能会进行不同的处理。

上面代码截图是在谷歌浏览器中的效果,焦点坐标会伸展出两条鱼圆相切线,形成一个三角形区域。

在此三角形区域内,具有径向渐变效果。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
       gradientUnits="userSpaceOnUse"
        fx="350" fy="400"
        cx="400" cy="400"
        r="80">
        <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>

代码效果运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150752dlo94l7t1110o0ov.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

前面所有的代码,径向渐变的属性值都是百分比形式存在。

这可能给阅读者一个误解,以为属性值只能是百分比,其实并不是这样。

上述代码给予的属性值都是绝对值,具体参阅线性渐变一文中gradientUnits属性相关知识。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部