現在の raphael API では、「不透明度」属性に渡された値が与えられる最後の不透明度以外の個々の停止不透明度を設定できるとは思えません。たとえば、次のようになります。
this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
...最後のストップで stop-opacity が 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"}