SVG dynamic add by id

by Jens Kühn

HTML

<svg id="parent">
  <g transform="translate(50,50)" id="outlet1">
  </g>
  <g transform="translate(450,50)" id="outlet2">
  </g>
  <text x="10" y="20" font-size="20">parent &lt;svg&gt; element</text>
</svg>

<label><input type="checkbox" name="outlet1" id="setOutlet1">Outlet1</label>

<label><input type="checkbox" name="outlet2" id="setOutlet2">Outlet2</label>

CSS

svg {
  border: 1px solid black;
}

#parent {
  width: 900px;
  height: 500px;
}

JavaScript

var outlet1 = '<svg width="400" height="400"><defs><style type="text/css"><![CDATA[circle{fill:#dfac20;stroke:#3983ab;stroke-width:2;}]]></style></defs><rect id="plate2" x="0" y="0" width="400" height="400" fill="white" fill-opacity="1" stroke-width="1" stroke="black"></rect><g transform="translate(200,200)"><path class="link" d="M0,0L50,80" stroke="lightgreen" stroke-width="5"></path><path class="link" d="M0,0L-30,60" stroke="lightgreen" stroke-width="5"></path><path class="link" d="M0,0L80,-50" stroke="lightgreen" stroke-width="5"></path><path class="link" d="M0,0L-50,-30" stroke="lightgreen" stroke-width="5"></path><circle class="node" stroke="lightgreen" stroke-width="5" r="20" cx="50" cy="80"></circle><circle class="node" stroke="lightgreen" stroke-width="5" r="23" cx="-30" cy="60"></circle><circle class="node" stroke="lightgreen" stroke-width="5" r="26" cx="80" cy="-50"></circle><circle class="node" stroke="lightgreen" stroke-width="5" r="20" cx="-50" cy="-30"></circle><circle cx="0" cy="0" r="10" fill="red" stroke="lightgreen" stroke-width="5"></circle></g><text x="10" y="20" font-size="20">&lt;svg&gt; element</text></svg>';

var outlet2 = '<svg width="400" height="400" class="outlet2"><defs><style type="text/css"><![CDATA[.outlet2 circle{fill:#00ffee;stroke:#3983ab;stroke-width:2;}]]></style></defs><rect id="plate2" x="0" y="0" width="400" height="400" fill="white" fill-opacity="1" stroke-width="1" stroke="black"></rect><g transform="translate(200,200)"><path class="link" d="M0,0L50,80" stroke="lightgreen" stroke-width="5"></path><path class="link" d="M0,0L-30,60" stroke="lightgreen" stroke-width="5"></path><path class="link" d="M0,0L80,-50" stroke="lightgreen" stroke-width="5"></path><path class="link" d="M0,0L-50,-30" stroke="lightgreen" stroke-width="5"></path><circle class="node" stroke="lightgreen" stroke-width="5" r="20" cx="50" cy="80"></circle><circle class="node" stroke="lightgreen" stroke-width="5" r="23" cx="-30" cy="60"></circle><circle...