ベジェ曲線下の勾配Raphael JS

Question

この例のようなアニメーションのグラデーションは、Raphael JSのhttp://jsfiddle.net/fusioncharts/dmaz3/のようにする必要があります。どうやってやるの ？

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script> 
 

 
<div id="canvas"></div> 
 

 
<script> 
 
var paper = Raphael('canvas'); 
 
    var tt = paper.path("M -4.47059 261.467 L 5.52941 261.467 C 5.52941 261.467 12.4412 250.867 17.049 250.867 C 21.6569 250.867 23.9608 250.867 28.5686 250.867 C 33.1765 250.867 35.4804 250.867 40.0882 250.867 C 44.6961 250.867 47 249.1 51.6078 247.333 C 56.2157 245.567 58.5196 243.8 63.1275 242.033 C 67.7353 240.267 70.0392 242.033 74.6471 238.5 C 79.2549 234.967 81.5588 213.767 86.1667 213.767 C 90.7745 213.767 93.0784 231.433 97.6863 231.433 C 102.294 231.433 104.598 219.067 109.206 219.067 C 113.814 219.067 116.118 236.733 120.725 236.733 C 125.333 236.733 127.637 220.48 132.245 212 C 136.853 203.52 139.157 194.333 143.765 194.333 C 148.373 194.333 150.676 201.4 155.284 201.4 C 159.892 201.4 162.196 185.5 166.804 185.5 C 171.412 185.5 173.716 190.8 178.324 190.8 C 182.931 190.8 185.235 185.5 189.843 185.5 C 194.451 185.5 196.755 185.5 201.363 185.5 C 205.971 185.5 208.275 219.387 212.882 194.333 C 227.49 159.28 219.794 195.64 244.402 170.233 L 244.402 261.467 z"); 
 
    tt.attr({ 
 
     'fill': '90-#429321-#B4EC51' 
 
    }); 
 
</script>

Answer 1

<svg height="300" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"> 
 
     <defs> 
 
      <clipPath 
 
        id="xxx"> 
 
       <rect x="0" 
 
         y="100" 
 
         width="250" 
 
         height="194" 
 
         transform="matrix(1,0,0,1,0,0)"> 
 

 
        <animate attributeName="width" 
 
          from="0" 
 
          to="250" 
 
          dur="2s"/> 
 
       </rect> 
 
      </clipPath> 
 
     </defs> 
 
     <g clip-path="url('#xxx')"> 
 

 
      <path d="M -4.47059 261.467 L 5.52941 261.467 C 5.52941 261.467 12.4412 250.867 17.049 250.867 C 21.6569 250.867 23.9608 250.867 28.5686 250.867 C 33.1765 250.867 35.4804 250.867 40.0882 250.867 C 44.6961 250.867 47 249.1 51.6078 247.333 C 56.2157 245.567 58.5196 243.8 63.1275 242.033 C 67.7353 240.267 70.0392 242.033 74.6471 238.5 C 79.2549 234.967 81.5588 213.767 86.1667 213.767 C 90.7745 213.767 93.0784 231.433 97.6863 231.433 C 102.294 231.433 104.598 219.067 109.206 219.067 C 113.814 219.067 116.118 236.733 120.725 236.733 C 125.333 236.733 127.637 220.48 132.245 212 C 136.853 203.52 139.157 194.333 143.765 194.333 C 148.373 194.333 150.676 201.4 155.284 201.4 C 159.892 201.4 162.196 185.5 166.804 185.5 C 171.412 185.5 173.716 190.8 178.324 190.8 C 182.931 190.8 185.235 185.5 189.843 185.5 C 194.451 185.5 196.755 185.5 201.363 185.5 C 205.971 185.5 208.275 219.387 212.882 194.333 C 227.49 159.28 219.794 195.64 244.402 170.233 L 244.402 261.467"> 
 
      </path> 
 
     </g> 
 
    </svg>

私はラファエルのないこの解決策は、（ラファエルとなぜあなたはラファエルでそれを "必要" です

Answer 2

"fill": "90-#429321-#B4EC51"

• 90 - 角度
• #429321 - 最初の色
• #B4EC51 - 第二色

グラデーション線形勾配フォーマット 「<角度> - <色> - <色>、<オフセット>]] * - <色>」、例えば： 「90-＃fff-＃白から黒または白から黒への90°のグラジエントまたは0~＃fff-＃f00：20-＃000 "0~＃0"のグラディエントを白から黒（0％で）から0~までのグラディエントで調整します。

放射グラデーション： "r [（fx、 ）] [ - [： ]]、例：" r＃fff- ＃000 " - 勾配が白から黒、または" r（0.25、0.75）＃fff-＃000 " - 勾配 、白から黒、焦点が0.25、0.75になります。フォーカスポイント の座標は0..1の範囲です。放射状グラデーションは、 の円と楕円にのみ適用できます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script> 
 

 
<div id="canvas"></div> 
 

 
<script> 
 
var paper = Raphael('canvas'); 
 
    var tt = paper.path("M -4.47059 261.467 L 5.52941 261.467 C 5.52941 261.467 12.4412 250.867 17.049 250.867 C 21.6569 250.867 23.9608 250.867 28.5686 250.867 C 33.1765 250.867 35.4804 250.867 40.0882 250.867 C 44.6961 250.867 47 249.1 51.6078 247.333 C 56.2157 245.567 58.5196 243.8 63.1275 242.033 C 67.7353 240.267 70.0392 242.033 74.6471 238.5 C 79.2549 234.967 81.5588 213.767 86.1667 213.767 C 90.7745 213.767 93.0784 231.433 97.6863 231.433 C 102.294 231.433 104.598 219.067 109.206 219.067 C 113.814 219.067 116.118 236.733 120.725 236.733 C 125.333 236.733 127.637 220.48 132.245 212 C 136.853 203.52 139.157 194.333 143.765 194.333 C 148.373 194.333 150.676 201.4 155.284 201.4 C 159.892 201.4 162.196 185.5 166.804 185.5 C 171.412 185.5 173.716 190.8 178.324 190.8 C 182.931 190.8 185.235 185.5 189.843 185.5 C 194.451 185.5 196.755 185.5 201.363 185.5 C 205.971 185.5 208.275 219.387 212.882 194.333 C 227.49 159.28 219.794 195.64 244.402 170.233 L 244.402 261.467 z"); 
 
    tt.attr({ 
 
     "fill": "90-#429321-#B4EC51", 
 
     "stroke-width": 0, 
 
     "width": 20 
 
    }); 
 
</script>