如何在 svg 背景中创建渐变色答案

【问题标题】：How to create gradient color in svg background如何在 svg 背景中创建渐变色
【发布时间】：2017-06-29 12:15:13
【问题描述】：

我需要在给定的 svg 圆圈中创建背景颜色，如下图所示。如何使用渐变来实现这种背景颜色？

注意：该图片只是背景颜色，不需要针、勾和标签。

<svg height="500" width="500">
  <circle cx="150" cy="150" r="100" stroke="black" stroke-width="3" fill="transparent" /> 
</svg>

【问题讨论】：

您是在谈论与呈现的完全一样的背景（两个半透明的圆圈和明亮的高光）还是只是这三件事之一？
@PaulLeBeau 是的，这正是我所需要的

标签： css svg gradient linear-gradients

【解决方案1】：

小提琴：https://jsfiddle.net/oLsLdqas/1/

<svg height="250" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="60%" fy="20%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(1,1,1);stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="180" cy="100" r="100"  fill="url(#grad1)" />

</svg>

更多信息请参考链接：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

【讨论】：