fill-opacity与半透明渐变填充实例页面

展示

代码

• HTML：

  <svg style="position:absolute;left:-999px;">
    <defs>
      <linearGradient id="myGradient">
        <stop offset="0%"  stop-color="deeppink" />
        <stop offset="100%" stop-color="deepskyblue" />
      </linearGradient>
    </defs>
  </svg>
  
  <svg>
      <circle class="circle" cx="150" cy="75" r="60"></circle>
  </svg>

• CSS：

  .circle {
      fill: url(#myGradient);
      fill-opacity: .5;
  }