Bir SVG haritasını manipüle etme önerileri

Question

California için yerel dilleri haritası üzerinde bir çalışma üzerinde çalışıyorum. Harita, her biri bir dile karşılık gelen alanları içerir. Bu gibi özgün görünüyor (görmek için tıklayın SVG):

Ben için, bunun gibi, (Inkscape olarak) elle bu bireysel dillerin her biri için "bulucu haritalar" yapmak istiyorum

Inkscape elle 60-bazı oluşturulan bu baş belası olacağını yapıyor,

Tabii

söylemek: dil (dil kodunu cah olan) Cahuilla aradı.

Daha da kötüsü, orijinalde bir hata bulduğumda, tüm konum belirleyici haritalarını yeniden yapmak zorunda kalırım. (Ve aslında son zamanlarda orijinalimin bir dili tamamen kaçırdığını fark ettim. Üzgünüz Cupeño.)

Bu yüzden amacım bu süreci otomatik hale getirmektir. SVG'yi veya hatta XML'i işleme konusunda çok fazla tecrübem yok, bu yüzden hangi kütüphanelerin en çok yardımcı olacağına dair öneriler arıyorum. Python'da çözümleri tercih ederim, günahlı olarak bu dilde umutsuz değilim.

orijinal SVG dosyasındaki tüm dil şekillere referans listesi alın:

ben gerek Özetlemek gerekirse.

1. değişiklik geçerli dilin

2. için şeklin arka plan rengi kutusunu ve ölçek yinelenen dile

3. etrafında bir kutu koyun: Bu listedeki her dil için

   belirli bir boyuta (Bu adımda, benim yaptığım gibi etraftaki şekilleri fiilen "kırpmak" zor olabilir - sadece beyaz bir arka plan üzerinde dil şekline sahip bir kutu oluşturmak yeterli olacaktır.) Nihai ürün daha sonra iyisi vs. cah.svg adlı 60 SVG dosyaları olacaktır

code.svg içinde sağ üst köşedeki bütün bu şeyler tasarrufu

yinelenen

yer, Orijinal haritayı düzenlemek için gerekliyse tüm shebang'ı yeniden üretmek mümkün olacaktır (ki bu büyük olasılıkla).

Answer 1

Inkscape için uzantıları yaratarak özellikle Python kullanarak ve tavsiye ederim bir başlangıç ​​olmalıdır. Gerçekten istediğin sürece 60 SVG'ye ihtiyacın olduğunu düşünmüyorum çünkü kaynak haritasının ihtiyacınız olan her şeye sahip olacak.

Yapacağım şey, çeşitli bölgeleri kullanmakta olduğunuz dil koduyla yeniden adlandırmak için Inkscape kullanmanızdır. Örneğin, Cahuilla veya cah şu anda SVG dosyanızda path13882 olduğunu. Onu cah veya Cahuilla olarak yeniden adlandırır ve her dil bölgesi için işlemi tekrar eder. Tüm yolları güncellediğinizden emin olmak için Edit \ XML Editor'ü kullanın.

Adları/kimlikleri güncelleştirdikten sonra, SVG komut dosyasına bakabilirsiniz. Sadece dil için ilgili bilgileri içeren bir javascript/ECMAScript harita veya sözlüğünü oluşturmak istiyoruz:

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 

Sonra sadece ekleyebilir ve sınırlayıcı kutusunun konumunu ve yol rengini değiştirecek bir mouseover işlev eklemek gerekir. Oldukça tarihli olmasına rağmen, burada one example etkinlik ve komut dosyası bulunmaktadır. Carto.net, interaktif bir harita örneğine de sahiptir.

SVG gibi görünecektir: SVG dosyası ile herhangi bir otomasyon için

<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);" /> 

, ben Inkscape uzantıları kullanmak. Developer Tutorials/Extensions altında Inkscape wiki'a bakın. Aksi halde, SVG hala XML'dir, böylece dil bölgelerinizi ayırt edici bir adla kaynak dosyalarında adlandırdıysanız, XML'yi ayrıştırmak ve her bir yol/dil bölgesini ayrı bir dosyaya kaydetmek için Python'u kullanabilirsiniz.

Answer 2

Haritanızı kullanarak bir example modelini kullanabilirsiniz. Sınırlayıcı kutuyu almak için herhangi bir öğeye tıklayabilirsiniz, bu miniview viewBox için kullanılabilir (bazı ayarlarda). Gördüğünüz gibi haritaya fazla kod eklemiyor, sadece birkaç öğe. Tüm viewBox'lara sahip olduğunuzda javascript kullanarak miniview 'viewBox' özniteliğini anında güncelleyebilirsiniz.

Seçilen şeklin renklendirilmesi için, ana haritada kullanılan tüm dolguyu geçersiz kılan bir dolguya sahip olan <svg> mini görünümüne <use> öğesinin eklenmesi önerilir (bunun için bir stil sayfası kuralı kullanmak zorunda kalabilirsiniz). emin olun, yüksek özgüllük var, örneğin #miniview .activeshape { fill: red !important } ekleyerek.Seçilen şekle <use> işaret etsin ve işaret ettiğiniz şekle class="activeshape" eklediğinizden emin olun.

Bu

en azından, bu yardımcı olur umarım :)