svg - Changing Port Location in custom element in JointJS -


i able create custom element utilizing answers question: using predefined svg file creating custom jointjs shape ports

after reviewing tutorials jointjs don't see how move ports different locations on element.

thanks

example code: http://jsfiddle.net/jshubert/9a8brrun/

var el1 = new joint.shapes.devs.model({   markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inports"/><g class="outports"/></g>',   size: {     width: 100,     height: 100   },   position: {     x: 50,     y: 75   },   attrs: {    '.label': { text: 'sw_1', 'ref-x': .1, 'ref-y': .01},     '.body': {       width: 1024,       height: 768,       'xlink:href': 'data:image/svg+xml;utf8,' + encodeuricomponent(svgfile),       preserveaspectratio: 'none'     }   },   inports: ['1'],   outports: ['2'] }); 

ref-x, ref-y applied on appropriate selector can trick eg.

'.inports .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}

http://jsfiddle.net/9a8brrun/1/


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -