javascript - How to use Jointjs and SVG to draw element tools -

i'm new javascript , svg , have no graphical programming background , first project using of those. started make custom element mike goodwin answer proposed , ended code after editing it:

joint.shapes.tools.tooledelement = joint.shapes.basic.generic.extend({      toolmarkup: [         '<g class="element-tools">',             '<g class="element-tool-remove"><circle fill="red" r="11" stroke="black" stroke-width="1"/>',                 '<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="m24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',                 '<title>remove element model</title>',             '</g>',             '<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>',                 '<path transform="scale(.7) translate(-16, -16)"/>',                 '<title>creates new link</title>',             '</g>',         '</g>'     ].join(''),      defaults: joint.util.deepsupplement({         attrs: {             text: { 'font-weight': 400, 'font-size': 'small', fill: 'black', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle' }         }     }, joint.shapes.basic.generic.prototype.defaults)  }); 

which works properly. draw line on green circle , make red circle red square. achieve looked @ this tutorial on paths draw , this tutorial on basic shapes. if try make line on green circle this:

'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="x y l 10 10 " />'  

it won't draw anything. " if cursor somewhere on page, no line drawn connect 2 places." , that's why omitted "m" path.

so here comes first question: how can draw line on center of green circle without starting previous last point defined on other path?

to make red square tried example second tutorial changing fill (as test):

//first line test <rect x="10" y="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/> 

or

//second line test <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/> 

the result of first line element @ tools being used draw again above this:

and second line end on nothing being show.

so here next questions:

why did results first line got that? , how can change red circle other shape?

update: line draw:

'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="m150 150 h 5 v 5 h 5 z" />' 

if use code example, result:

'<path transform="scale(.7) translate(-16, -16)" stroke="black" stroke-width="1" d="m150 150 h 5 v 5 h 5 z" />' 

if use other code result be:

the tutorial led me believe m defining start point changing translate(-16, -16) else made correct start point possible. translate attribute combined m set starting point.

the first question been answered on update. second question (concerning red square conflicting element shape inside rect) work around:

use path draw tools elements instead of using basic shapes, way won't conflict element shape.

example:

'<g class="element-tool-link"><circle fill="green" r="11" cx="160" cy="40" stroke="black" stroke-width="1"/>',     '<path transform="scale(.7) translate(-16, -16)"/>',     '<title>creates new link</title>', '</g>' 

would turn into:

'<g class="element-tool-link">',     '<path d="m33 0 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>',     '<path transform="scale(.7) " stroke="black" stroke-width="1" d="m58,16  h 37 "/>',     '<title>creates new link</title>', '</g>' 

where '<path d="m33 0 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>' defines circle shape.