1、线性渐变：

  1. <body>
  2.     <svg width="500px" height="300px" style="border: 1px solid">
  3.        <defs><!-- 要先定义 -->
  4.            <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%"><!-- 横向渐变 --><!-- x2=100%：斜着渐变 -->
  5.                <stop offset="0%" style="stop-color: rgb(255,255,0);"></stop>
  6.                <stop offset="100%" style="stop-color: rgb(255,0,0);"></stop>
  7.            </linearGradient>
  8.        </defs>
  9.        <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect>
  10.     </svg>
  11. </body>