贝塞尔曲线路径下的渐变 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

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

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

Gradients Linear gradient format: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “90-#fff-#000” – 90° gradient from white to black or “0-#fff-#f00:20-#000” – 0° gradient from white via red (at 20%) to black.

radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “r#fff-#000” – gradient from white to black or “r(0.25, 0.75)#fff-#000” – gradient from white to black with focus point at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.

<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

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

我在没有 raphael 的情况下找到了这个解决方案（使用 raphael 找不到

贝塞尔曲线路径下的渐变 Raphael JS

gradient under bezier cruve path Raphael JS

javascript

raphael

graphic