如何使用Raphael創建漸變對象

我正在嘗試使用Raphael JS圖形庫。我想使用應該接受對象的屬性梯度。文檔中提到SVG規範。我發現SVG中的漸變對象，例如如何使用Raphael創建漸變對象

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%"> 
<stop offset="5%" stop-color="red" /> 
<stop offset="95%" stop-color="blue" stop-opacity="0.5" /> 
</linearGradient>

但是我怎麼能從我的javascript中引用呢？

circle.attr("gradient", "myFillGrad");

事先不工作:)

來源

2009-02-22 tarella

UPDATE 感謝：改寫爲最新的拉斐爾API：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Linear Gradient</title> 
    <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
    <script type="text/javascript" charset="utf-8"> 
    var paper = Raphael(10, 10, 800, 600); 
    var circle = paper.circle(150, 150, 150); 
    circle.attr({ 
     "fill": "90-#f00:5-#00f:95", 
     "fill-opacity": 0.5 
    }); 
    </script> 
</body> 
</html>

新attr() API的文檔中找到here。

來源

2009-02-25 05:46:06

它看起來是這樣的API已經不存在了。有關測試用例，請參閱http://jsfiddle.net/GuQA6/。您不會碰巧知道用於改變色塊不透明度的新API，是嗎？ – 2010-03-10 20:04:25

我不認爲目前的拉斐爾API允許你設置比上一個，這是考慮到要傳遞給「不透明度」 ATTR值之外的各個停止混濁，例如：

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})

...在最後一站將有一個不透光度0。對於更細粒度的控制我加入這個「案例」的屬性，我raphael.js解析分支：

case "opacityStops": 
          if (attrs.gradient) { 
           var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url\(#|\)$/g, E)); 
           if (gradient) { 
            var stops = gradient.getElementsByTagName("stop"); 
            var opacs=value.split("-"); 
            for(var ii=0;ii<stops.length;ii++){ 
             stops[ii][setAttribute]("stop-opacity", opacs[ii]||"1"); 
            } 
           } 
           break; 
          }

您還必須在「availableAttrs」對象添加相應的條目，例如：

availableAttrs = {<other attrs here>..., opacityStops:"1"}

的呼叫建立與不同的不透明徑向漸變的圓形，然後停止會是什麼樣子：

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.5)#fff-#fff:70-#000", "opacityStops": "1-0-0.6"}

來源

2010-08-30 21:58:41 lafncow

如何使用Raphael創建漸變對象

回答

相關問題