2013-12-17 136 views
1

我想使圓形漸變填充svg形狀。如this fiddle所示,使用<radialGradient>可生成橢圓漸變填充而不是圓形漸變。如何使用圓形漸變填充製作svg形狀?

我所尋找的卻是一個漸變填充與此類似:

enter image description here

基本上我需要圓形漸變填充不論SVG形狀。任何人都可以向我推薦一種方法來繼續?

Thanx提前!!

+0

您可能需要[指定許多屬性](http://fiddle.jshell.net/kf58h/1/)來實現這一點,[根據W3規範](http://www.w3.org/TR /SVG11/pservers.html#RadialGradients)。 – Passerby

回答

2

您可以使用:

<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/

1

在這裏你去。

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

我希望這是你在找什麼。

+0

CSS在SVG中工作嗎? –

+0

它是一個基於div的純css解決方案。 - @osi – Nitesh

+0

好的,我以爲TS正在尋找SVG解決方案 –