kazuhikoarase/export_svg.html

## export_svg.html
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="simcir.js"></script>
    <link rel="stylesheet" type="text/css" href="simcir.css" />
    <script type="text/javascript" src="simcir-basicset.js"></script>
    <link rel="stylesheet" type="text/css" href="simcir-basicset.css" />
    <script type="text/javascript" src="simcir-library.js"></script>
    <script type="text/javascript">
$(function() {

  var $s = simcir;

  var $simcir = $('#mySimcir');

  var getCircuitData = function() {
    return $s.controller(
        $simcir.find('.simcir-workspace') ).text();
  };
  var setCircuitData = function(data) {
    $simcir.children().remove();
    $s.setupSimcir($simcir, JSON.parse(data) );
  };
  var getSVG = function() {

    // stylesheets
    var styles = '';
    $('link[rel="stylesheet"]').each(function() {
      styles += '<?xml-stylesheet type="text/css" href="' +
          $(this).attr('href') + '" ?>';
    });

    var $ws = $simcir.find('.simcir-workspace').clone();

    // remove simcir attributes
    $ws.find('*').
      removeAttr('simcir-node-type').
      removeAttr('simcir-transform-x').
      removeAttr('simcir-transform-y').
      removeAttr('simcir-transform-rotate');

    var svg = $('<div></div>').append($ws).html();
    if (svg.indexOf('http://www.w3.org/2000/svg') == -1) {
      var i = svg.indexOf('>');
      svg = svg.substring(0, i) +
        ' xmlns="http://www.w3.org/2000/svg"' +
        svg.substring(i);
    }
    return '<?xml version="1.0" ?>' + styles + svg;
  };

  // button click events
  $('#getDataBtn').click(function() {
    $('#dataArea').val(getCircuitData() );
  });
  $('#setDataBtn').click(function() {
    setCircuitData($('#dataArea').val() );
  });
  $('#getSVGBtn').click(function() {
    $('#dataArea').val(getSVG() );
  });

  // load default (just specifies circuit size).
  setCircuitData('{ "width":600, "height":200 }');
});
    </script>
    <title></title>
  </head>
  <body>
    <div id="mySimcir"></div>
    <div>
      <button id="getDataBtn">v get data v</button>
      <button id="setDataBtn">^ set data ^</button>
      <button id="getSVGBtn">v get SVG v</button>
    </div>
    <textarea id="dataArea" style="width:600px; height:200px;"></textarea>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="simcir.js"></script>
	<link rel="stylesheet" type="text/css" href="simcir.css" />
	<script type="text/javascript" src="simcir-basicset.js"></script>
	<link rel="stylesheet" type="text/css" href="simcir-basicset.css" />
	<script type="text/javascript" src="simcir-library.js"></script>
	<script type="text/javascript">
	$(function() {

	var $s = simcir;

	var $simcir = $('#mySimcir');

	var getCircuitData = function() {
	return $s.controller(
	$simcir.find('.simcir-workspace') ).text();
	};
	var setCircuitData = function(data) {
	$simcir.children().remove();
	$s.setupSimcir($simcir, JSON.parse(data) );
	};
	var getSVG = function() {

	// stylesheets
	var styles = '';
	$('link[rel="stylesheet"]').each(function() {
	styles += '<?xml-stylesheet type="text/css" href="' +
	$(this).attr('href') + '" ?>';
	});

	var $ws = $simcir.find('.simcir-workspace').clone();

	// remove simcir attributes
	$ws.find('*').
	removeAttr('simcir-node-type').
	removeAttr('simcir-transform-x').
	removeAttr('simcir-transform-y').
	removeAttr('simcir-transform-rotate');

	var svg = $('<div></div>').append($ws).html();
	if (svg.indexOf('http://www.w3.org/2000/svg') == -1) {
	var i = svg.indexOf('>');
	svg = svg.substring(0, i) +
	' xmlns="http://www.w3.org/2000/svg"' +
	svg.substring(i);
	}
	return '<?xml version="1.0" ?>' + styles + svg;
	};

	// button click events
	$('#getDataBtn').click(function() {
	$('#dataArea').val(getCircuitData() );
	});
	$('#setDataBtn').click(function() {
	setCircuitData($('#dataArea').val() );
	});
	$('#getSVGBtn').click(function() {
	$('#dataArea').val(getSVG() );
	});

	// load default (just specifies circuit size).
	setCircuitData('{ "width":600, "height":200 }');
	});
	</script>
	<title></title>
	</head>
	<body>
	<div id="mySimcir"></div>
	<div>
	<button id="getDataBtn">v get data v</button>
	<button id="setDataBtn">^ set data ^</button>
	<button id="getSVGBtn">v get SVG v</button>
	</div>
	<textarea id="dataArea" style="width:600px; height:200px;"></textarea>
	</body>
	</html>