JSFiddle - React, Tailwind, and code Playground

by SooChangLee

HTML

<script src="https://s3.ap-northeast-2.amazonaws.com/js-fiddle/svg.js"></script>
<img src="">

<div id="drawing">
</div>

CSS

html, body, #canvas{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

loadSVG(function(str_svg){
  testBBox(str_svg);
});

function testBBox(str_svg){
	var draw = SVG('drawing')
	draw.svg(str_svg);
  
  var svg = draw.children()[1];
  var arr_children = svg.children();
  
  for(var i=0 ; i<arr_children.length ; i++){
  	var child = arr_children[i];
    
    console.log(child.bbox());
  }
}

function loadSVG(callback){
$.ajax({
      type: "get",
      url: "https://s3.ap-northeast-2.amazonaws.com/js-fiddle/1.svg",
      /*data:  {
					  act: "delete_design_package",
					  k_design_package_no:design_package_no
					}, */
      dataType:"TEXT",
      cache: false,
      // processData: false,
      // contentType: false,

    }).done(function( str_svg, textStatus, jqXHR ) {
    	let blob = new Blob([str_svg], {type: 'image/svg+xml'});
			let url = URL.createObjectURL(blob);
    
      $("img").attr("src", url);

			callback(str_svg);

    }).fail(function(jqXHR, textStatus, errorThrown) {
      console.log(jqXHR.responseText);
    });
 
}