SVG 中的线性渐变

尽管实际上大多数情况下您都是使用 Adob​​e Illustrator 等工具创建 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>

现在这里有一个带有橙色渐变的版本：

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

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

  <defs>
    <linearGradient id="bones-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
	  <stop offset="0%" style="stop-color:#FF9133;" />
	  <stop offset="100%" style="stop-color:#FF0015;" />
    </linearGradient>
  </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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#211533; fill-opacity: 0.5;}</style>

  <defs>
	<linearGradient id="bones-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
	  <stop offset="0%" style="stop-color:#f8f8f8;stop-opacity:0.5" />
	  <stop offset="50%" style="stop-color:#fc00ff;stop-opacity:1" />
	  <stop offset="100%" style="stop-color:#f8f8f8;stop-opacity:0.5" />
	</linearGradient>
  </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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#F9EC31;}</style>

  <defs>
	<linearGradient id="bones-gradient" x1="0%" y1="0%" x2="50%" y2="100%">
	  <stop offset="0%" style="stop-color:blue;" />
	  <stop offset="100%" style="stop-color:#FF0015;" />
	</linearGradient>
  </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>