1
我嘗試創建兩個SVG-圖標添加陰影的SVG圖標
- 一個帶有陰影
- 和一個帶有插圖陰影
我嘗試了許多解決方案，但陰影從我的偶像看起來洞時間「錯誤」。 我不明白。請有人幫助我。
我用photoshop創建預覽，所以你可以更好地理解我需要什麼。
FIDDLE這裏 http://jsfiddle.net/7dghx0tr/
SVG
<defs>
<radialGradient id="rgrad" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:#87e0fd;stop-opacity:1" />
<stop offset="100%" style="stop-color:#05abe0;stop-opacity:1" />
</radialGradient>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css" >
<![CDATA[
* { stroke: #006584;
stroke-width: 0.3;
fill:url(#rgrad);}
path { stroke: #666666;
stroke-width: 0.1;
filter:url(#drop-shadow);}
]]>
</style>
</defs>
<g>
<path d="M33.437,13.872C30.938,9.97,41.322,4.599,34.753,0.46c-1.508-0.944-3.168,1.32-1.572,2.322
c3.627,2.279-5.914,6.629-1.999,12.745C32.181,17.08,34.434,15.431,33.437,13.872z"/>
<path d="M40.748,13.872c-2.507-3.914,7.894-9.268,1.314-13.412c-0.802-0.504-1.909-0.041-2.162,0.841
c-0.652,2.274,3.575,0.756-0.135,5.835c-1.995,2.729-3.094,5.551-1.275,8.392C39.503,17.089,41.732,15.412,40.748,13.872z"/>
<path d="M26.086,13.872C23.578,9.955,33.99,4.608,27.401,0.46c-1.503-0.946-3.17,1.319-1.572,2.322
c3.601,2.263-5.892,6.665-1.999,12.745C24.833,17.08,27.08,15.434,26.086,13.872z"/>
<path d="M31.563,33.913c15.729,0,24.001-4.011,24.001-7.331c0-3.832-10.432-7.489-23.49-7.322
c-13.082-0.168-23.489,3.5-23.489,7.322C8.585,30.123,17.818,33.913,31.563,33.913z M31.87,21.226c0.048,0,0.096,0,0.145,0.002
v0.001c0.02,0,0.04-0.001,0.06-0.001c0.021,0,0.04,0.001,0.06,0.001v-0.001c0.049-0.001,0.097-0.002,0.145-0.002
c9.891,0,19.903,1.744,19.903,5.075c0,4.3-15.53,5.176-20.048,5.074v-0.001c0,0-0.118,0-0.119,0v0.001
c-4.641,0.106-20.046-0.805-20.046-5.074C11.969,22.969,21.979,21.226,31.87,21.226z"/>
<path d="M17.636,28.765l0.08-4.949c-2.973,0.763-4.62,1.697-4.62,2.484C13.096,27.081,14.714,28.006,17.636,28.765z"/>
<path d="M24.491,22.697c-1.673,0.164-3.178,0.376-4.511,0.625l-0.094,5.941c1.332,0.251,2.84,0.468,4.516,0.634L24.491,22.697z"/>
<path d="M31.258,22.361c-1.595,0.012-3.098,0.067-4.51,0.157l-0.094,7.561c1.41,0.092,2.914,0.148,4.509,0.162L31.258,22.361z"/>
<path d="M56.106,28.697c-0.004-0.068-0.022-0.134-0.03-0.202c-3.37,5.298-17.273,6.637-23.942,6.539v-0.002c0,0-0.117,0-0.119,0
v0.002c-8.507,0.125-20.9-1.76-23.941-6.539c-0.009,0.068-0.027,0.134-0.03,0.202c-2.588,0.566-3.726,1.76-3.654,3.796
c0.061,1.724,2.262,3.215,5.128,4.063c1.798,4.475,5.129,8.107,9.418,10.506l-6.173,14.399c-0.369,0.857,0.029,1.854,0.889,2.221
c0.216,0.092,0.442,0.137,0.665,0.137c0.656,0,1.28-0.384,1.555-1.024l6.126-14.29c5.895,2.286,13.754,2.481,20.156,0l6.126,14.29
c0.274,0.641,0.898,1.024,1.555,1.024c0.223,0,0.449-0.045,0.665-0.137c0.86-0.367,1.259-1.363,0.89-2.221l-6.174-14.399
c4.289-2.398,7.619-6.031,9.419-10.506c2.865-0.848,5.065-2.339,5.128-4.063C59.831,30.457,58.694,29.263,56.106,28.697z
M7.219,32.812c-0.049-0.926,0.094-1.466,0.917-1.815c0.115,1.139,0.338,2.233,0.625,3.297C7.835,33.934,7.25,33.442,7.219,32.812z
M55.388,34.294c0.288-1.064,0.511-2.159,0.626-3.297c0.821,0.349,0.965,0.889,0.916,1.815
C56.898,33.442,56.313,33.934,55.388,34.294z"/>
<path d="M51.054,26.3c0-0.787-1.647-1.722-4.62-2.484l0.079,4.949C49.435,28.006,51.054,27.081,51.054,26.3z"/>
<path d="M44.262,29.262l-0.093-5.941c-1.334-0.248-2.839-0.461-4.511-0.625l0.089,7.199C41.423,29.73,42.93,29.514,44.262,29.262z"
/>
<path d="M37.496,30.079l-0.095-7.561c-1.412-0.09-2.915-0.145-4.51-0.157l0.096,7.879C34.582,30.227,36.085,30.171,37.496,30.079z"
/>
</g>
</svg>