如何在svg背景中创建渐变颜色
问题描述:
我需要在给定的svg圆中创建背景颜色,就像下面的图像一样。如何使用渐变实现此背景颜色?如何在svg背景中创建渐变颜色
注意:只是该图片的背景颜色无需针,刻度线和标签。
示例链接: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/en-US/docs/Web/SVG/Tutorial/Gradients
你在谈论的背景完全一样呈现(与t半透明的圈子,以及明亮的亮点)或者只是这三件事中的一件? –
@PaulLeBeau是的,这正是我需要的 –