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说孔方兄认证

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King·Forward

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值