如何使用圓形漸變填充製作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形狀？

回答

相關問題