javascript - 径向渐变

Question

如何不使用 CSS3 (-webkit-radial-gradient) 创建圆形的径向渐变？ 假设我有一个圆圈:

#circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

如何为这个圆绘制径向渐变？

编辑:我想在没有任何外部库的情况下执行此操作。我还根据色标创建渐变。例如(0,255)。

Answer 1

您可以使用以下几种方法:

1. 您可以创建 svg file with a radial gradient ，并使用 background-image: url()
将其设置为背景
2. 您可以创建一个 png 或 jpg 的渐变，并按照上面相同的方式进行设置

如果您不想使用外部文件，您可以对其进行 Base64 编码并使用 data url .

您可以使用background-size: contains使渐变适合圆形(或椭圆形!)的大小，只需确保渐变的分辨率足够高即可永远不会像素化。

编辑:Here's a fiddle so you can see it in action 。由于数据 url 已编码，因此这是 svg 文件的来源:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
<defs>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%">
    <stop stop-color="white" offset="0%"/>
    <stop stop-color="black" offset="100%"/>
  </radialGradient>
</defs>
<circle r="256px" fill="url(#grad)" />
</svg>

您可以修改色标，然后使用 this tool 重新编码数据 URI