Rappid - FreeTrasform element with custom SVG

Proper definition of an element with custom SVG markup

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://jointjs.com/js/rappid.min.js"></script>
<link rel="stylesheet" href="https://jointjs.com/css/rappid.min.css">
<!-- Rappid Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
  position: relative;
}

JavaScript

var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 500,
  height: 300,
  gridSize: 1,
  model: new joint.dia.Graph()
});

var customMarkup = '<path id="path123" stroke="#000000" stroke-miterlimit="10" d="M7.2,28V15.7L20.3,4.1l9-0.6v8.8c0,0-9,5-9,8.6 c0,1.7,0,7.2,0,7.2H7.2z"/> <polyline id="polyline125" stroke="#000000" stroke-miterlimit="10" points="20.1,4.3 20.1,2.4 32.2,2.4 30.4,11.8 29.3,11.8 "/> <g id="g127"> <path id="path129" stroke="#000000" stroke-miterlimit="10" d="M32.2,2.4h1.9c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L43,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L56,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h3c2.1,0,2.7,1.2,2.7,2.2v4.9c0,0.7-0.6,1.2-1.2,1.2 H30.6"/> </g> <polyline id="polyline131" stroke="#000000" stroke-miterlimit="10" points="68.8,4 74.2,4 74.2,9.2 68.8,9.2 "/> <g id="g133"> <line id="line135" stroke="#000000" stroke-miterlimit="10" x1="68.6" y1="5.6" x2="66.3" y2="5.6"/> <line id="line137" stroke="#000000" stroke-miterlimit="10" x1="66.5" y1="7.6" x2="68.8" y2="7.6"/> <path id="path139" stroke="#000000" stroke-miterlimit="10" d="M68.6,5.6c0,0,0.1,0.8,0.1,1c0,0.3-0.1,1-0.1,1 s0.1,0.8,0.1,1s-0.1,1-0.1,1h-2.8c0,0-0.1-0.8-0.1-1s0.1-1,0.1-1s-0.1-0.8-0.1-1s0.1-1,0.1-1v0c0,0-0.1-0.8-0.1-1...