如何在Raphael中应用linearGradient？

Question

我正在使用Raphael JS在SVG标签中创建linearGradient。 当使用检查元素检查SVG时，我看到以下内容：

我已经写了一小段代码用于说明：

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
  <defs>
  <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"></path>
  <marker id="raphael-marker-endblock5520" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5">
  <use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#FF6347" stroke="none"></use>
  </marker>
  </defs>
  <path style="cursor: pointer;" fill="none" stroke="#ff6347" d="M330,59C330,59,505.0481725888325,59,525.1298411193279,58.99999999999999" stroke-width="0.75" marker-end="url(#raphael-marker-endblock5520)" transform="matrix(1,0,0,1,0,0)"></path>

  <rect x="130" y="19" width="200" height="80" r="8" rx="8" ry="8" fill="#3029f5" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,0)"></rect>
  <text style="text-anchor: middle; font: 13px &quot;Arial&quot;; cursor: pointer;" x="230" y="59" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,0)"><tspan dy="4.5">Acef</tspan></text>
</svg>

我正在尝试在 svg ==> defs 中附加linearGradient，以使它变成这样：

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
  <defs>
    <linearGradient id="MyGradient" x2="0%" y2="100%">
        <stop offset="50%" stop-color="green" />
        <stop offset="50%" stop-color="white" />
      </linearGradient>

  <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"></path>
  <marker id="raphael-marker-endblock5520" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5">
  <use xlink:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#FF6347" stroke="none"></use>
  </marker>
  </defs>
  <path style="cursor: pointer;" fill="none" stroke="#ff6347" d="M330,59C330,59,505.0481725888325,59,525.1298411193279,58.99999999999999" stroke-width="0.75" marker-end="url(#raphael-marker-endblock5520)" transform="matrix(1,0,0,1,0,0)"></path>

  <rect x="130" y="19" width="200" height="80" r="8" rx="8" ry="8" fill="url(#MyGradient)" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,0)"></rect>
  <text style="text-anchor: middle; font: 13px &quot;Arial&quot;; cursor: pointer;" x="230" y="49" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,0)"><tspan dy="4.5">Acef</tspan></text>
</svg>

这样它应该变成这样：

这是我编写节点的代码。 Graph.js通过调用Raphael.js方法来完成此过程。

graph.js

   // creates a new MyGraph Node on Raphael document r, centered on [pos_x,pos_y], with label 'label', 
    // and of type 'circle' or 'rect', and of color 'color'
    function MyGraphNode(graph,pos_x, pos_y,label,type,color){
        var self = this;
        var r  = graph.r;
        var sy = graph.style.node_size_y;
        var sx = graph.style.node_size_x;
        var node_fig = null;
        var selected = false;
        this.connectors = [];
        this.close_button = null;
        this.uid = 0;
        type = 'rect';

        graph.add_node(this);

        if(type === 'circle'){
            node_fig = r.ellipse(pos_x,pos_y,sx/2,sy/2); //calling Raphael
         }else {
            node_fig = r.rect(pos_x-sx/2,pos_y-sy/2,sx,sy,graph.style.node_redius);  //calling Raphael
        }
        //linearGradient
        //linearGradient
    var linearGradientId = "raphael-gradient-"+node_fig.type+node_fig.id;
        linearGradient = $($("linearGradient"), {
            id: linearGradientId,
            x2: "0%",
            y2:"100%"
        });
        stop = $($("stop"), {
           offset:"50%",
           'stop-color':"green",
        });
        stop2 = $($("stop"), {
           offset:"50%",
           'stop-color':"white"
        });
        linearGradient.appendChild(stop);
        linearGradient.appendChild(stop2);
        r.defs.appendChild(linearGradient);

/*skip portion of code*/

我正在附加raphael.js文件以帮助您：

http://www.uploadmb.com/dw.php?id=1572447060

我完全没有得到任何结果。由于我们正在进行特殊项目，请提供帮助。任何解决方案将不胜感激.... !!

致谢