SVG 渐变- 放射性

SVG 渐变是一种在 SVG 图形中应用颜色渐变效果的方法,其中放射性渐变是一种特殊的渐变类型,它从一个中心点向外辐射出渐变效果。放射性渐变可以创建出非常炫目的视觉效果,常用于制作图标、背景等。

创建放射性渐变

要创建一个放射性渐变,首先需要使用 <defs> 元素定义一个渐变,然后在图形元素中应用这个渐变。

-- -------------------- ---- -------
---- ----------- -------------
  ------
    --------------- ---------- -------- -------- ------- -------- ---------
      ----- ----------- -------------------------------------------------- --
      ----- ------------- ---------------------------------------------- --
    -----------------
  -------
  
  ----- ----------- ------------ ------------------ --
------

在上面的示例中,我们定义了一个 id 为 grad1 的放射性渐变,它从白色(透明)向蓝色渐变。然后将这个渐变应用到一个矩形元素中。

渐变参数解释

  • cxcy:定义渐变的中心点坐标,取值范围是 0 到 1,例如 50% 表示中心点在正中间。
  • r:定义渐变的半径,取值范围是 0 到 1,例如 50% 表示半径为图形宽度或高度的一半。
  • fxfy:定义渐变焦点的坐标,通常与中心点坐标一致,如果不一致会产生不同的效果。

放射性渐变可以通过调整这些参数来实现不同的效果,如改变中心点位置、半径大小等。

渐变颜色和透明度

在放射性渐变中,可以通过 <stop> 元素来定义不同位置的颜色和透明度。offset 属性表示颜色的位置,取值范围是 0 到 100,0 表示渐变的起始位置,100 表示结束位置。

上面的示例中,第一个 <stop> 定义了渐变的起始位置为白色透明,第二个 <stop> 定义了结束位置为不透明的蓝色。

放射性渐变可以通过调整 <stop> 元素的位置和颜色来实现丰富多彩的效果。

以上就是关于 SVG 放射性渐变的介绍和示例代码,希望可以帮助你更好地理解和应用 SVG 渐变效果。

上一篇: SVG 渐变 - 线性
下一篇: SVG 实例大全
纠错
反馈