如何用圆形渐变填充制作svg形状？

Question

我正在尝试使用圆形渐变填充制作svg形状。使用<radialGradient>进行椭圆渐变填充而不是圆形渐变，如this fiddle所示。

我正在寻找的是类似于此的渐变填充：

基本上我需要圆形渐变填充，而不管svg形状如何。谁有人建议我继续前进？

Thanx提前!!

Answer 1

您可以使用：

<svg>
  <defs>

    <radialGradient
       id="grad1" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:hsl(212,52%,15%); "/>
            <stop offset="50%" style="stop-color:hsl(212,52%,35%); "/>
            <stop offset="100%" style="stop-color:hsl(212,52%,52%); "/>
    </radialGradient>

  </defs>

  <rect height="400" width="600" x="100" y="220" style="fill:url(#grad1);"></rect>

</svg>

特别是观看userSpaceOnUse它使渐变独立于对象。缺点是当你移动物体时，你也需要移动渐变。

http://jsfiddle.net/2Nc4b/

Answer 2

你走了。

<强> WORKING DEMO

CSS更改：

div{background: #264a75; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #264a75 2%, #4176b6 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(2%,#264a75), color-stop(100%,#4176b6)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #264a75 2%,#4176b6 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #264a75 2%,#4176b6 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #264a75 2%,#4176b6 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #264a75 2%,#4176b6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264a75', endColorstr='#4176b6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ width:300px; height:150px; border:3px solid #385d8a;}

我希望这就是你要找的东西。