Question

我需要动画线下的动画渐变，就像本例http://jsfiddle.net/fusioncharts/dmaz3/与Raphael JS一样。我怎么能这样做？

<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

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

90 - 角度
#429321 - 第一种颜色
#B4EC51 - 第二种颜色

渐变线性渐变格式：   “ - [ - [：]] * - ”，例如：   “90-＃fff-＃000” - 从白色到黑色或90°的90°渐变   “0-＃fff-＃f00：20-＃000” - 0°梯度从白色到红色（20％）到   黑色。

径向渐变：“r [（，   ）] [ - [：]] * - “，例如：”r＃fff-＃000“    - 从白色到黑色的渐变或“r（0.25,0.75）#ffff-＃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>

Answer 2

＆＃13;

<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>

＆＃13;

我发现没有raphael的这种解决方案（raphael无法找到

）

在bezier cruve path Raphael JS下的渐变

2 个答案: