Как применить linearGradient в Рафаэле?

Question

Я использую Raphael JS для создания linearGradient в теге SVG. При проверке SVG с использованием элемента inspect я вижу следующее:

Я написал небольшой фрагмент кода для иллюстрации:

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

И я пытаюсь добавитьlinearGradient в svg ==> определяет так, чтобы он стал таким:

<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

Я не смог получить никакого результата. Пожалуйста, помогите, так как мы работаем над специальным проектом. Любое решение будет оценено .... !!

С уважением