html5 - Clippath not working if created using Javascript but working perfectly if it is from HTML tags -

i facing issue in svg clipping.i have 1 graph need drawn dynamically javascript , values coming json. in 1 of configuration have clip curve if going out of range,otherwise have change value range both x , y axis fit curve in graph window. did poc before implementation of clipping functionality , tried in conventional html tags , working fine. bellow code of poc:

<svg>    <defs>     <clippath id="clippath1">         <rect id="rect1" x="0" y="0" width="940.5" height="300">         </rect>     </clippath>     <marker id="marker1" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="10" markerheight="10" orient="auto">         <circle cx="5" cy="5" r="1" stroke="red" stroke-width="1" fill="black">         </circle>     </marker> </defs> <g>     <polyline points="0,0 140,125 160,140 180,220 220,240 300,280 400,450 500,500 900,900"         style="fill: none; stroke: red; stroke-width: 5" clip-path="url(#clip)" stroke="blue"         stroke-width="1" marker-start="url(#point)" marker-mid="url(#point)" marker-      end="url(#point)" />     </g> </svg> 

it working fine. have 1 marker show point , have 1 inside tag , have applied clippath polyline.

now in project need perform same thing javascript(creating tags) javascript. , not working.

    parentsvggroup = _currtrendwin.getsvg();      //create defs tag     defs = pwc.hmiac.svgpolyline.createsvgelement('defs', { 'id': 'drawabletrendarea_defs', 'appendto': parentsvggroup });      //creating  clippath     clippath = pwc.hmiac.svgpolyline.createsvgelement('clippath', { 'id': 'drawabletrendarea_clippath', 'appendto': defs });      //creating rectangle defining drawable rectangle     cliprect = pwc.hmiac.svgpolyline.createsvgelement('rect',                                                       { 'id': 'drawabletrendarearect',                                                           'x': _currtrendwin.getrect().left,                                                           'y': _currtrendwin.getrect().top,                                                           'width': _currtrendwin.getrect().width,                                                           'height': _currtrendwin.getrect().height,                                                           'appendto': clippath                                                       });      markerconfig =     {         'id': 'point',         'viewbox': '0 0 10 10',         'refx': 5,         'refy': 5,         'markerwidth': 10,         'markerheight': 10,         'orient': 'auto',         'appendto': defs     };      marker = pwc.hmiac.svgpolyline.createsvgelement('marker', markerconfig);      pointstyleconfig =     {         'cx': 5,         'cy': 5,         'r': 1,         'stroke': 'red',         'stroke-width': 1,         'fill': 'black',         'appendto': marker     };     pointstyle = pwc.hmiac.svgpolyline.createsvgelement('circle', pointstyleconfig);       polyline = {         'points': points.trim(),         'id': _name,         'fill': 'none',         'stroke': 'blue',         'stroke-width': 1,         'marker-start': 'url(#point)',         'marker-mid': 'url(#point)',         'marker-end': 'url(#point)',         'clip-path': 'url(#drawabletrendarea_clippath)',         'appendto': parentsvggroup     };      poly = document.getelementbyid(_name);     if (poly) {         poly.parentnode.removechild(poly);     }     poly = pwc.hmiac.svgpolyline.createsvgelement('polyline', polyline);   

this code stuff creation of same logic javascript.but if copy generated html file browser , put whole html tag new file working expected.

sorry forgot add function..its bellow:

  _createsvgelement = function (type, attributes) {    var svgelement = document.createelementns(_svgns, type),   attr, value;   if (attributes) {         (attr in attributes) {             if (attr) {                 value = attributes[attr];                  if (attr === 'appendto') {                     value.appendchild(svgelement);                 }                 else {                     svgelement.setattributens(null, attr, value);                 }             }         }      }     return svgelement;   }; 

could u ppl can me out problem..

thanks arijit

it late game. having same issue, problem seems come fact javascript/jquery both convert elementname lower case , clippath needs clippath.

i trying find work around or if did please share.

the pita way able work creating html string , using jquery append clippaths defs section.

not clean, not way it, got done.