Sugerencias para manipular un mapa SVG

Question

Estoy trabajando en un mapa de las lenguas nativas de California para Wikipedia. El mapa contiene áreas que corresponden a un idioma. El original es el siguiente (clic en él para ver el SVG):

quiero hacer "mapas de localización" para cada uno de esos idiomas individuales con la mano (en Inkscape), como éste, para una lengua llamada Cahuilla (que tiene el código de idioma cah):

Huelga decir que, haciendo esto sería un dolor en el cuello si me genera todos los 60 algunos a mano en Inkscape.

Peor, cada vez que encuentro un error en el original, tengo que volver a hacer todo el conjunto de mapas de localización. (Y de hecho, recientemente me di cuenta de que a mi original le falta un idioma por completo. Lo siento Cupeño.)

Mi objetivo es automatizar este proceso. No tengo mucha experiencia en el procesamiento de SVG o XML, por lo que estoy buscando recomendaciones sobre qué bibliotecas serían más útiles. Preferiría soluciones en Python, sinceramente no soy inútil en ese idioma.

En resumen, necesito:

obtener una lista de referencias a todas las formas lingüísticas en el archivo SVG originales.

Para cada idioma en esta lista:

1. el cambio del color de fondo de la forma para el idioma actual

2. poner un cuadro alrededor de la lengua

3. duplicar la caja y la escala a un tamaño dado (reconozco que en este paso podría ser difícil "recortar" las formas circundantes como lo hice en mi ejemplo - bastaría con crear un cuadro con la forma del idioma sobre un fondo blanco).

4. lugar el duplicado en la esquina superior derecha

5. guardar todo este material en code.svg

El producto final será entonces de 60 archivos SVG nombrados cah.svg, etc. Mejor aún, sería posible volver a generar todo el shebang si fuera necesario editar el mapa original (lo cual es bastante probable).

Answer 1

Yo recomendaría el uso de Python y específicamente la creación de extensiones para Inkscape. No creo que realmente necesite 60 SVG a menos que realmente quiera porque el mapa fuente tendrá todo lo que necesita.

Lo que haría sería utilizar Inkscape para cambiar el nombre de las distintas regiones al mismo código de idioma que utilizará. Por ejemplo, Cahuilla o cah actualmente es path13882 en su archivo SVG. Cambiaría el nombre a cah o Cahuilla y repetiría el proceso para cada una de las regiones de idioma. Use el Editor de Edición \ XML para asegurarse de actualizar todas las rutas.

Después de haber actualizado los nombres/ID, entonces puede buscar en scripting SVG. Me acaba de crear un/mapa ecmascript Javascript o diccionario que tiene la información relevante para el idioma:

var langaugeMap = {}; 
languageMap["cah"] = { name: "Cahuilla", color: "rgb(255, 0, 0)" }; 
languageMap["cup"] = { name: "Cupeño", color: "rgb(255, 64, 0)" }; 
// and so on -- this could even be generated from a CSV file or Excel, etc. 
// if the highlighted color is always the same, then you don't need it in the map 
// or use style sheets for an activeshape and inactiveshape 
// Put any information that is specific to a language in the map 

continuación, sólo tiene que añadir una función al pasar el ratón que añadiría y la posición del cuadro delimitador y cambiar el color del trazado. Aquí está one example de eventos y scripting aunque está bastante anticuado. Carto.net tiene un ejemplo de mapa interactivo también.

El SVG sería algo como:

<path 
    style="fill:#800000;fill-opacity:1;display:inline" 
    d="m 422.43078,517.40746 c 0.52151,0.006 1.10755,0.0374 1.75925,0.0825 3.82011,0.26462 5.01088,0.75501 5.75001,2.37491 0.51312,1.12355 2.4121,3.0097 4.22213,4.1946 3.906,2.55656 7.38824,2.07964 9.61517,-1.3194 2.12996,-3.25075 9.13451,-3.19196 13.61739,0.11545 1.77185,1.30707 4.04994,2.38037 5.06319,2.38041 1.01325,0 3.34593,0.92548 5.18421,2.06155 2.52816,1.56236 4.9918,2.09869 10.09889,2.19902 3.71359,0.0729 7.68145,0.64349 8.82374,1.26442 2.81717,1.53202 5.67633,1.42382 10.7693,-0.40133 4.97461,-1.78261 6.31161,-1.36525 17.10267,5.31063 3.39862,2.10239 6.90491,4.08094 7.7956,4.39801 2.46593,0.8776 4.55428,4.66976 3.95259,7.17971 -0.29359,1.22605 -0.75898,3.51121 -1.03349,5.07968 -0.27411,1.56855 -0.88382,3.33952 -1.35761,3.93621 -1.50842,1.89871 -20.98501,7.77151 -27.8945,8.41122 -3.66014,0.33879 -8.3091,1.04337 -10.32987,1.56676 -3.50666,0.90799 -3.81743,0.79746 -6.78388,-2.44089 -3.3486,-3.65594 -6.11308,-4.2716 -8.48815,-1.89661 -2.14408,2.14401 -1.85126,3.96434 1.0667,6.66846 1.40725,1.30409 1.85699,2.10446 1.00027,1.77571 -0.85672,-0.32883 -6.3937,-0.12213 -12.3033,0.46176 -5.9096,0.58386 -12.56062,1.27336 -14.78297,1.53381 -4.17058,0.4888 -5.09869,-0.37014 -2.61673,-2.42989 2.1563,-1.78956 1.74245,-2.63318 -1.65999,-3.36449 -1.69931,-0.36525 -4.94789,-1.90738 -7.213,-3.42496 -2.26473,-1.51754 -5.89662,-3.66823 -8.07583,-4.77731 -2.17921,-1.10923 -6.21922,-3.94186 -8.97721,-6.29463 -4.75318,-4.05478 -4.93682,-4.36681 -3.43604,-6.02527 0.96935,-1.07117 2.36209,-1.56397 3.5899,-1.26992 1.62639,0.38937 2.49494,-0.41237 4.59588,-4.24958 1.42481,-2.60257 2.23686,-4.95457 1.80316,-5.22266 -0.4337,-0.26805 -1.06784,-3.14557 -1.40725,-6.39358 -0.33978,-3.24797 -1.19001,-6.79064 -1.89134,-7.87242 -1.74322,-2.68957 -1.2114,-3.65437 2.44111,-3.61188 l 0,0 z" 
    id="cah" 
    inkscape:label="#cah" 
    onmouseover="highlightRegion(evt);" 
    onmouseout="restoreRegion(evt);" /> 

Para cualquier automatización con el archivo SVG, me gustaría utilizar extensiones de Inkscape. Mire el Inkscape wiki debajo de los Tutoriales/Extensiones del Desarrollador. De lo contrario, SVG sigue siendo XML, por lo que si ha nombrado las regiones de su idioma en el archivo fuente con un nombre distintivo, podría usar Python para analizar el XML y guardar cada región de ruta/idioma en un archivo separado.

Answer 2

Aquí hay un example usando su mapa. Puede hacer clic en cualquier elemento para obtener el cuadro delimitador, esto se puede usar para miniview viewBox (con algunos ajustes). Como ve, no agrega mucho código al mapa, solo un par de elementos. Cuando tenga todos los ViewBoxes, puede actualizar el atributo miniview 'viewBox' sobre la marcha usando javascript.

Para colorear la forma seleccionada, sugiero agregar un elemento <use> dentro de la minivista <svg> que tiene un relleno que anula cualquier relleno utilizado en el mapa principal (puede que tenga que usar una regla de hoja de estilos para hacer esto Asegúrese de que tenga alta especificidad, por ejemplo, agregue #miniview .activeshape { fill: red !important }.Deje que el <use> señale la forma seleccionada y asegúrese de agregar class="activeshape" en la forma que señale.

Esto debería ser un comienzo al menos, espero que ayude :)