SVG实现线性渐变实例页面

CSS代码：

.svg {
    width: 80%;
    height: 320px;
    background: url(line-gradient.svg);
    background-color: #34538b; /* IE6~IE8 */
    background-size: 100% 100%;
}
                

SVG代码：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <defs>
    <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2">
      <stop stop-color="#a0b3d6" offset="0"/>
      <stop stop-color="#34538b" offset="1"/>
    </linearGradient>
  </defs>
 <g>
    <title>Layer 1</title>
    <rect id="svg_1" height="480" width="640" y="0" x="0" fill="url(#svg_2)"/>
  </g>
</svg>

                

HTML代码：

<div class="svg"></div>