svg obtener medidas de lineas de un archivo

marcusaurelio · #1 (**permalink**) 31/07/2015, 16:44

Hola como estan? estoy buscando como obtener las medidas de los poligonos de un archivo svg.

estoy trabajando con jquery.svg pero no le pude dar al clavo.. es para calcular cortes en un pantografo.. es decir..

si cargo un archivo con un cuadrado necesito obtener los (cm, mm, pulgadas, pies, pixels, lo que sea) en alto y ancho.. que eso casi lo consegui, solo que no logro identificar las unidades que me dio

si cargo un archivo con un circulo, deberia darme la circunferencia.. que por ahi vi que sale el radio... por lo cual lo puedo sacar facilmente... excepto por que no reconozco las unidades..

si cargo una letra deberia darme las medidas de todas las lineas...

si cargo un archivo con un, circulo, cuadrado, letra etc.. deberia darme las medidas de todo..

el codigo que estoy usando es

Código:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<link rel="stylesheet" href="jquery.svg.css">
<style>
#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.svg.js"></script>
	<script src="jquery.svggraph.js"></script>
	<script src="jquery.svgdom.min.js"></script>
<script>
$(function() {
	$('#svgbasics').svg({onLoad: drawInitial});
	

	$('#export').click(function() {
		var xml = $('#svgbasics').svg('get').toSVG();

		$('#svgexport').html(xml.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
	});
});

function drawInitial(svg) {
	svg.load('../cssImg/cuadro.svg')
	//svg.load('varios.svg')
}

</script>
</head>
<body>
<h1>&nbsp;</h1>
<div id="svgbasics" style="width:100%;"></div>
<p> <button id="export">Export</button></p>
<div id="svgexport"></div>
</body>
</html>

el resultado que me da de un archivo con (un cuadro de 100 *100 mm, otro de 50 * 50 mm, una letra A de 50*50 mm, un circulo de 50*50 mm y una estrella 5 puntas de 50*50 mm ) es.. el siguiente

Código:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
		id="Capa_1" x="0px" y="0px" width="1904" height="300" viewBox="0 0 595.281 841.89" enable-background="new 0 0 595.281 841.89" xml:space="preserve"> 
			<rect x="47.536" y="63" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="283.463" height="283.465"/>
			<rect x="68.704" y="367.588" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="141.732" height="141.732"/> 
				<g> 
					<path fill="none" stroke="#070707" stroke-miterlimit="10" d="M266.983,460.74l-17.591,44.581h-22.617l57.799-141.732h26.135 l57.798,141.732h-23.37l-18.093-44.581H266.983z M322.77,446.441l-16.838-40.795c-3.768-9.255-6.282-17.666-8.796-25.866h-0.502 c-2.514,8.2-5.025,17.033-8.543,25.654l-16.585,41.007H322.77z"/> 
				</g> 
				<circle fill="none" stroke="#070707" stroke-miterlimit="10" cx="139.57" cy="606.036" r="70.866"/> 
				<polygon fill="none" stroke="#070707" stroke-miterlimit="10" points="349.635,656.282 305.774,632.219 262.04,656.535 270.27,605.278 234.742,569.096 283.689,561.48 305.465,514.803 327.487,561.353 376.474,568.686 341.136,605.073 "/>
</svg>

si pudieran ayudarme con la busqueda.. o bien con el codigo. estaria agradecido.

marcusaurelio · #2 (**permalink**) 03/08/2015, 13:54

bueno gente les cuento que avance bastante...

estuve trabajando con Snap.svg

Código:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="dist/snap.svg-min.js"></script>
<script>
        window.onload = function () {
			var s = Snap("#svg");
			
			Snap.load('cuadro.svg', function (response) {
			
				
				s.append(response);
				
				document.getElementById('txt').value=s.toString();
				path= s.selectAll('path');
				polig= s.selectAll('polygon');
				poliline= s.selectAll('polyline');
				rect= s.selectAll('rect');
				circle= s.selectAll('circle');
				line= s.selectAll('line');
				
				path.forEach( function( myPath ) {
					
					alert('path: '+myPath.getTotalLength())
					
					})
					
				polig.forEach( function( myPath ) {
					
					alert('polyg: '+myPath.getTotalLength())
					
					})
				
				rect.forEach( function( myPath ) {
					
					alert('rect: '+myPath.getBBox()['h'])
					
					})
					
				circle.forEach( function( myPath ) {
					
					alert('circle: '+myPath.getBBox()['r1'])
					
					})
					
				line.forEach( function( myPath ) {
					
					alert('line: '+myPath.getPointAtLength()['angle'])
					
					})
					
				poliline.forEach( function( myPath ) {
					
					alert('poliline: '+myPath.getTotalLength())
					
					})
				
				//s.select('g').select('path').getTotalLength()
			});
			
			
			
	
			
		}
		</script>
</head>

<body>
<div id="svg"></div>

<textarea name="txt" cols="" rows="50" style="width:100%" id="txt"></textarea>

</body>
</html>

con el cual pude obtrener varios datos mas. y separarlos.. pero estoy con problemas con los poligonos, las polilineas y las lineas...

sigo dandole vueltas a la cosa.. cualquier ayuda es bienvenida...

marcusaurelio · #3 (**permalink**) 03/08/2015, 15:29

sigo avanzando... las lineas laslogre obtener restando x1 - x2 y y1 - y2 y aplicando teorema de pitagoras.. para obtener la hipotenusa..

sigo renegando con los demas..

marcusaurelio · #4 (**permalink**) 08/09/2015, 13:59

pero che.. tengo menos convocatoria que sergio +A... jajaja