上一节我们讲的是线性渐变,本节我们来学习径向渐变。径向渐变可以理解为以某一点为圆心,颜色值沿半径方向进行渐变。
如何创建径向渐变
我们可以通过 <radialGradient>
元素创建一个 SVG 的径向渐变。径向渐变的使用其实和线性渐变差不多,也是嵌套在 <defs>
元素中使用,在使用时需要定义一个唯一的 id
名称,然后通过 fill
属性引用。
示例:
定义一个径向渐变的圆:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="300">
<defs>
<radialGradient id="radia" cx="50%" cy="50%" r="40%"