Poner etiqueta en el "centro" de una ruta SVG

Estoy tratando de dibujar una etiqueta en un polígono de un archivo svg. El problema al que me enfrento es encontrar aproximadamente el centro de este polígono para colocar la etiqueta, ya que las coordenadas de la ruta están en formato svg y necesitan ser analizadas. ¿Hay una manera más fácil de determinar el centro de un polígono svg (tal vez alguien puede señalar una biblioteca de JavaScript o un fragmento)? Estoy usando la biblioteca de JavaScript Raphael para manipular el svg, pero no parece ir más allá de la funcionalidad svg estándar.Poner etiqueta en el "centro" de una ruta SVG

Fuente

2009-11-07 sol

Lo más simple que podría intentar hacer es calcular el centro tomando el promedio de todos los puntos en el polígono. Debería funcionar para todos menos los polígonos más irregulares. He usado el mismo algoritmo para buenos resultados en mis programas.

Lo mejor de la suerte.

Fuente

2009-11-07 04:36:09 Randaltor

Lo siento, para no formulado claramente lo que mi pregunta. El problema es más acerca de cómo obtener las coordenadas del atributo d de la ruta que está en este formato para calcular el centro o para encontrar una biblioteca de JavaScript que lo haga sin analizar el atributo de acuerdo con la especificación svg. – sol

El primer problema para resolver primero es convertir primero el svg en polígono. He estado buscando un código para convertir las rutas svg en polígonos pero no pude encontrar uno. Tal vez tenga que desenterrar los códigos fuente de los proyectos svg – ivanceras

puede probar con el siguiente aproximación para hacer algo similar a la sugerencia polígono, basado en métodos SVG DOM:

var totalPathLength = pathelm.getTotalLength(); 
var step = totalPathLength/100; 
for(var dist=0; dist < totalPathLength; dist+=step) 
{ 
    var pt = pathelm.getPointAtLength(dist); 
    addToAverage(pt.x, pt.y); 
}

creo que el enfoque más simple es utilizar el centro de BoundingBox del elemento de la ruta (pathelm. getBox()), eso es más simple que la sugerencia del polígono.

Fuente

2009-11-07 11:33:46

+11

PD: 'var bbox = p.getBox(); var x = Math.floor (bbox.x + bbox.width/2.0); var y = Math.floor (bbox.y + bbox.height/2.0); 'hice el truco para mí, thx. – lwe

¡Gracias @Iwe! Eso fue mucho más simple de lo que podría imaginar :) – Viet

@ El comentario de Iwe merece ser una respuesta separada. Es un enfoque más simple y diferente con diferentes pros y contras. Aquí hay una [** JSBIN demostración de ambas formas de país de Vietnam y Canadá **] (http://jsbin.com/orAzoFI/3/edit) que muestra algunos puntos clave y diferencias: que ninguno de los métodos garantiza que el centro estará dentro de la forma, y que el método de Erik tira del centro hacia partes del camino que están más fracturadas/complejas/tienen una circunferencia relativa más alta. – user568458

-2

insertar una etiqueta de texto en el interior del SVG y posicionarla mediante el cálculo de la anchura y la altura

<svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    ............ 
    ............ 

    <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" > 
     Text To Show 
    </text> 
</svg>

Fuente

2012-10-18 11:36:16

Poner etiqueta en el "centro" de una ruta SVG

Respuesta

Cuestiones relacionadas