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

我想使圆形渐变填充svg形状。如this fiddle所示，使用<radialGradient>可生成椭圆渐变填充而不是圆形渐变。如何使用圆形渐变填充制作svg形状？

我所寻找的却是一个渐变填充与此类似：

enter image description here

基本上我需要圆形渐变填充不论SVG形状。任何人都可以向我推荐一种方法来继续？

Thanx提前!!

2013-12-17 Surender Thakran

您可能需要[指定许多属性]（http://fiddle.jshell.net/kf58h/1/）来实现这一点，[根据W3规范]（http://www.w3.org/TR /SVG11/pservers.html#RadialGradients）。 – Passerby

您可以使用：

<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它使梯度独立的对象。缺点是当你移动你的物体时，你也需要移动渐变。

enter image description here

http://jsfiddle.net/2Nc4b/

来源

2013-12-17 09:09:03

在这里你去。

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;}

我希望这是你在找什么。

来源

2013-12-17 09:09:30 Nitesh

CSS在SVG中工作吗？ –

它是一个基于div的纯css解决方案。 - @osi – Nitesh

好的，我以为TS正在寻找SVG解决方案 –

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

回答

相关问题