SVG实现径向渐变实例页面

代码：

CSS代码：
.svg {
    width: 480px;
    height: 240px;
    padding-top: 80px;
    background: url(//image.zhangxinxu.com/image/blog/201109/wall.jpg); /* IE6~IE8 */
    background: url(radial-gradient.svg), url(//image.zhangxinxu.com/image/blog/201109/wall.jpg);
    background-size: 100% 100%;
    text-align: center;
}
SVG代码：
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <radialGradient fy="0.34375" fx="0.414063" r="0.53" cy="0.34375" cx="0.414063" id="svg_4">
   <stop stop-opacity="0.6" stop-color="#a0b3d6" offset="0"/>
   <stop stop-opacity="0.8" stop-color="#34538b" offset="1"/>
  </radialGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <rect id="svg_5" height="480" width="642" y="0" x="0" fill-opacity="1" stroke-width="0" stroke="#000000" fill="url(#svg_4)"/>
 </g>
</svg>
HTML代码：
<div class="svg">
  <img src="//image.zhangxinxu.com/image/blog/201109/fish.png" />   
</div>

效果：