SVG 中的径向渐变

发表 admin at 2024年8月26日

类别

未分类

标签

我已经讲过如何在 SVG 中定义线性渐变，所以让我们再讲一些径向渐变的例子。语法与线性渐变非常相似。

再次，这是我们的基本交叉骨头 SVG 图像：

基本 SVG 图像

这是它的 SVG 标记，通过将路径数据更改为... 来简化：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.bones{fill:#ccc ;} .eye{fill:#666;}</style>

  <path class="bones" d="..."/>

  <path class="bones" d="..."/>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

现在这里有一个从深绿色到黄绿色的径向渐变版本：

SVG 径向渐变示例 1

以下是标记。请注意突出显示的部分以及 defs、radialGradient 和 stop 元素：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#F9EC31;}</style>

  <defs>
    <radialGradient id="bones-gradient">
	  <stop offset="0%" style="stop-color:#FF9133;" />
	  <stop offset="100%" style="stop-color:#FF0015;" />
    </radialGradient>
  </defs>

  <g fill="url(#bones-gradient)">
	  <path class="bones" d="..."/>
	  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

现在有一个具有多个颜色停止点并使用停止不透明度的版本：

SVG 径向渐变示例 2

它的标记如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#211533;}</style>

  <defs>
	<radialGradient id="bones-gradient">
	  <stop offset="0%" style="stop-color:#5AA8DF;stop-opacity:1" />
	  <stop offset="50%" style="stop-color:#FB7629;stop-opacity:0.7" />
	  <stop offset="100%" style="stop-color:#FAE9B0;stop-opacity:0.5" />
	</radialGradient>
  </defs>

  <g fill="url(#bones-gradient)">
	  <path class="bones" d="..."/>

	  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

最后，为了演示如何改变渐变的位置，让我们在更简单的圆形上展示它。

SVG 径向渐变示例 3

标记如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient2" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient3" cx="20%" cy="50%" r="50%" fx="50%" fy="50%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient4" cx="50%" cy="50%" r="50%" fx="20%" fy="90%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient5" cx="20%" cy="20%" r="50%" fx="20%" fy="20%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>

    <radialGradient id="gradient6" cx="50%" cy="50%" r="50%" fx="80%" fy="80%">
	<stop offset="0%" style="stop-color:#FF00FF;" />
	<stop offset="100%" style="stop-color:#FFBD2E;" />
    </radialGradient>
  </defs>

  <!-- top left circle -->
  <circle cx="40" cy="60" r="30" fill="url(#gradient1)" />
  <!-- top center circle -->
  <circle cx="100" cy="60" r="30" fill="url(#gradient2)" />
  <!-- top right circle -->
  <circle cx="160" cy="60" r="30" fill="url(#gradient3)" />

  <!-- bottom left circle -->
  <circle cx="40" cy="140" r="30" fill="url(#gradient4)" />
  <!-- bottom center circle -->
  <circle cx="100" cy="140" r="30" fill="url(#gradient5)" />
  <!-- bottom right circle -->
  <circle cx="160" cy="140" r="30" fill="url(#gradient6)" />
</svg>

以下是有关所引入的新属性的简要说明：

cx & cy：渐变中心的位置。这会影响整个渐变。
r：渐变圆的半径。
fx & fy：渐变焦点的位置。它影响第一个颜色停止点的位置。