如何在SVG背景中创建渐变颜色 [英] How to create gradient color in svg background

问题描述

我需要像下面的图像一样在给定的svg圆中创建背景颜色.如何使用渐变达到这种背景颜色?

I need to create the background color in given svg circle as like an below image.. how to acheive this background color using gradient?

注意:该图片仅需使用背景颜色，无需针，刻度线和标签.

Note: just background color for that pic no need for needle, tick and label.

示例链接: http://jsfiddle.net/mkn9t627/4/

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

推荐答案

提琴: 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/zh-CN/docs/Web/SVG/Tutorial/Gradients

Refer link for more information : https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

这篇关于如何在SVG背景中创建渐变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！