具有Snap SVG的多色RGBA渐变不起作用

时间:2014-03-04 08:22:43

标签: svg gradient

我需要画一个填充的圆圈,半透明的3色渐变色。我在Canvas和HTML SVG中完成了这个。我不能使用HTML SVG,因为我需要使用json文件中的javascript变量修改颜色值。由于其他原因,Canvas是不可能的。 Snap SVG是我的选择,根据文档,它应该可以工作,但事实并非如此。

这个例子(错误地?)绘制一个红色到黑色的球体。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="js/jquery-1.11.0.min.js"></script> 
    <script src="js/snap.svg-min.js"></script>      
    </head>  
  <body>
   <svg id="svg" width="300" height="300" style='stroke-width: 0px; background-color:rgba(008,008,016,1.0);'></svg>  
  <script>
  var s = Snap("#svg");

  var g1 = s.gradient("l(0, 0, 1, 1)rgba(255,000,000,1.0)-(000,255,000,1.0)-(000,000,255,1.0)");

  var bigCircle = s.circle(150, 150, 100);
    bigCircle.attr({
    fill: g1,
    });
  </script>
  </body>
</html>

文档暗示支持RGBA。但是当这样使用时,只显示第一种颜色。其他颜色只会使第一个颜色变暗。此外,支持色彩停止,但显然它们根本不适用于RGBA。我做错了吗?

http://snapsvg.io/docs/#Paper.gradient

0 个答案:

没有答案