<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="bigmotorstyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80">
 <title>Motor</title>
 <desc>Motor symbol as depicted in process control diagrams</desc>
 <defs>
  <linearGradient id="greyThreeD" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" stop-color="grey"/>
   <stop offset="30%" stop-color="white"/>
   <stop offset="100%" stop-color="black"/>
  </linearGradient>
  <linearGradient id="greenThreeD" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" stop-color="green"/>
   <stop offset="30%" stop-color="lime"/>
   <stop offset="100%" stop-color="black"/>
  </linearGradient>
  <clipPath id="cliprect">
   <rect x="0" y="10" width="120" height="60" stroke="black"
    stroke-width="2" fill="none"/>
  </clipPath>
  <symbol id="motor" viewBox="0 0 120 80" preserveAspectRatio="xMidYMid meet">
   <circle cx="60" cy="40" r="50" clip-path="url(#cliprect)"/>
   <rect x="20" y="10" width="80" height="60"/>
   <path d="M 110 40 L 114 40 M 114 42 L 114 38"/>
  </symbol>
 </defs>
 <g>
  <use xlink:href="#motor" class="on" x="0" y="0" height="80" width="120"/>
  <use xlink:href="#motor" class="off" x="120" y="0" height="80" width="120"/>
 </g>
</svg>

css命名为BigMotorStyle.css， 内容如下：

.on
{
 fill: url(bigmotor.svg#greenThreeD);
 stroke: black;
}

.off
{
 fill: url(bigmotor.svg#greyThreeD);
 stroke: black;
}

问题是在svg中根本就看不出linearGradient的效果，为什么？哪里出问题了？
这两个是放在同一目录下的。请高手赐教！