SVG_29_径向渐变radialGradient

知识点：

radialGradient 用来定义径向渐变，以对图形元素进行填充或描边。

说人话，就是定义辐射性渐变，就是以一个点为圆心，向周围进行颜色渐变。前面有文章讲解了线性渐变，有兴趣的可以点击查看：lineGradient线性渐变-- SVG_9_线性颜色渐变_竖排文字_动画

使用radialGradient的方式与使用lineGradient的方式一样，都是在defs标签中定义的，然后通过url(#id)的方式进行引用。不仅可以用在fill填充，还可以应用在stroke描边上。这里其实和另一个标签pattern--相关文章：SVG_24_pattern标签_使fill填充_stroke描边多姿多彩，效果差不多，都是达到使填充或描边丰富多彩的效果。

先上效果，由于转换成gif图片，可以看到有雪花不高清了，这其实正凸显了SVG的矢量图形优势，SVG是不会模糊的。

• 黄色到绿色渐变的两种效果，我是用了比较简单的方式定义

<defs>     <radialGradient id="xi_1">       <stop offset="10%" stop-color="gold"/>       <stop offset="95%" stop-color="green"/>     </radialGradient>    <radialGradient id="xi_2">       <stop offset="50%" stop-color="gold"/>       <stop offset="80%" stop-color="green"/>     </radialGradient>  </defs>   <circle fill="url(#xi_1)" cx="60" cy="60" r="50"/>    <circle fill="url(#xi_2)" cx="60" cy="180" r="50" />

拿id为xi_1的radialGradient来讲，子标签stop表示定义渐变属性，其中的offset属性表示渐变偏移量，10%，就表示在以中心点开始，向外10%的节点开始发生渐变。stop-color定义渐变色，整段stop表示，从0%到10%使用gold金色（默认颜色填充方式为pad，以原色填充，下面有讲）；

 

色彩鲜艳的交叉渐变是怎么实现的呢？

先看下方代码

<defs> <radialGradient spreadMethod="reflect"                    cx="50%"                    cy="50%"                    r="50%"                    fx="25%"                    fy="75%"                    fr="10%"                   id="flameGradient1">      <stop offset="0%" stop-color="white"/>      <stop offset="10%" stop-color="yellow"/>      <stop offset="95%" stop-color="red"/>    </radialGradient>    <radialGradient spreadMethod="reflect"                    cx="0%"                    cy="50%"                    r="50%"                    fx="25%"                    fy="75%"                    fr="10%"                   id="flameGradient2">      <stop offset="0%" stop-color="white"/>      <stop offset="10%" stop-color="yellow"/>      <stop offset="95%" stop-color="red"/>    </radialGradient>  </defs>     <circle fill="none" stroke-width="20" stroke="url(#flameGradient2)" cx="60" cy="300" r="50" >    <animateTransform attributeName="transform" type="rotate" from="0 60 300" to="360 60 300" dur="3s" repeatCount="indefinite"></animateTransform>  </circle>  <circle fill="none" stroke-width="20" stroke="url(#flameGradient1)" cx="180" cy="300" r="50" >    <animateTransform attributeName="transform" type="rotate" from="360 180 300" to="0 180 300" dur="3s" repeatCount="indefinite"></animateTransform>  </circle>

拿id为flameGradient1的radialGradient来说，里面除了stop子标签外，还定义了一系列属性，

spreadMethod表示渐变区域之外的表现方式，有三个值：pad、reflect、repeat。默认值为pad，表示按照stop子标签的颜色填充；reflect表示镜像，顾名思义，就是按照stop子标签的定义，反向渐变展示。repeat更好理解了，就是按照stop子标签重复展示。

 

cx cy r ，只看属性名称，就能猜到，是一个颜色渐变圆，cx，cy表示一个点，r是半径，cx,cy的值为0%到100%，cx表示x轴，cy表示y轴，当cx和cy都是50%的时候，是在圆心的。

 

而fx,fy,fr是什么呢，他们表示渐变的焦点，焦点可以在圆内，也可以在圆外，一般圆内使用居多。如果打个比方的话，可以理解为灯光，有灯罩的那种电灯泡，通过摇摆灯，可以是灯光的照射范围改变。

我们举个栗子：

这是圆点和焦点居中的效果

<radialGradient spreadMethod="pad"                    cx="50%"                    cy="50%"                    r="50%"                    fx="50%"                    fy="50%"                    fr="1%"                   id="flameGradient2">

这是焦点为fx=25%的效果，其他值未变

渐变的焦点是不是不一样了。

 

Xi说孔方兄认证