javascript - create - svg animation generator

Obtenga el tamaño real de un elemento SVG/G

Question

¿Hay alguna forma precisa de obtener el tamaño real de un elemento svg que incluya trazos, filtros u otros elementos que contribuyan al tamaño real del elemento desde JavaScript?

He intentado casi todo lo que viene a mi mente y ahora siento que estoy llegando a un callejón sin salida :-(

Pregunta actualizada para agregar más contexto (Javascript)

Answer 1

Ambos raphael js http://dmitrybaranovskiy.github.io/raphael/ y d3 js http://d3js.org/ tienen varios métodos para encontrar el tamaño de un objeto svg o conjuntos de objetos svg. Depende de si se trata de un círculo, un cuadrado, una ruta, etc. en cuanto a qué método usar.
Sospecho que está utilizando formas complejas, por lo que en ese caso el cuadro delimitador sería su mejor opción http://raphaeljs.com/reference.html#Element.getBBox (Editar: sitio de referencia actualizado). http://dmitrybaranovskiy.github.io/raphael/reference.html#Element.getBBox

Answer 2

Aquí hay un ejemplo usando D3.js :

Comenzando con un div :

<div style="border:1px solid lightgray;"></div>

El código de JavaScript se ve así:

var myDiv = d3.select(''div'');
var mySvg = myDiv.append(''svg'');
var myPath = mySvg.append(''path'');
myPath.attr({
''fill'': ''#F7931E'',
''d'': ''M37,17v15H14V17H37z M50,0H0v50h50V0z''
});
// Get height and width.
console.log(myPath.node().getBBox());

Answer 3

No puedes obtener los valores directamente. Sin embargo, puede obtener las dimensiones del rectángulo delimitador:

var el = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle
console.log( rect.width );
console.log( rect.height);

Es compatible al menos en las versiones reales de todos los principales navegadores.

Compruebe el violín

Answer 4

Usted no especificó ningún lenguaje de programación. Entonces puedo sugerir usar Inkscape .

En el menú archivo, encontrará las propiedades del documento y en la primera página, el comando "cambiar el tamaño de la página al contenido". De esta forma, eliminas todo el espacio en blanco de tu dibujo y ves el tamaño real. Después de los valores de ancho y alto, la aplicación se encuentra dentro del encabezado de svg.

Sé que Inkscape admite secuencias de comandos y operaciones de línea de comando, pero no sé si es posible hacer la operación de recorte de esta manera. Pero si es posible, puede hacerlo desde cualquier lenguaje de programación.