SVG지도 조작에 대한 제안

Question

나는 Wikipedia를 위해 캘리포니아의 모국어지도를 만들고 있습니다. 지도에는 각 언어에 해당하는 영역이 있습니다. 이 같은 원래 본다 (확인을 클릭 SVG) :

나는 경우,이처럼 (Inkscape)에 손으로 그 각 각 언어에 대해 "로케이터지도"를 만들고 싶어

나는 잉크 스케이프에서 손으로 모든 60-일부를 생성 한 경우이 목에 통증이 될 일을,

없이

말할 : 언어 (언어 코드 cah이있는) Cahuilla을했다.

원본에서 실수를 발견 할 때마다 전체 로케이터지도 집합을 다시해야합니다. (그리고 사실 나는 최근에 나의 원판이 하나의 언어를 완전히 잃어버린다는 것을 깨달았다.) 미안 Cupeño.

나의 목표는이 과정을 자동화하는 것이다. SVG 또는 XML 처리 경험이별로 없기 때문에 어느 라이브러리가 가장 도움이되는지에 대한 권장 사항을 찾고 있습니다. 나는 파이썬에서 솔직히 솔루션을 선호 할 것이다. 나는 그 언어에서 희망이 없다.

원래 SVG 파일의 모든 언어 형태에 대한 참조의 목록을 가져옵니다 :

내가 필요 요약합니다.

1. 변화는 현재 언어

2. 의 모양의 배경 색상 상자와 규모를 복제 언어

3. 주위에 상자를 넣어 :이 목록에있는 각 언어에 대해

   주어진 크기로 (나는이 예에서 나의 예에서했던 것처럼 주변 도형을 실제로 자르기가 어려울 수 있음을 인정한다. 단지 흰색 배경에 언어 모양을 가진 상자를 만드는 것만으로 충분할 것이다.) 최종 제품은 다음 더 좋은 등 cah.svg라는 이름의 60 개 SVG 파일이 될 것입니다

을 code.svg의 오른쪽 상단 모서리에이 모든 물건을 저장

에서 중복

장소, 원래의지도를 편집해야 할 필요가 있다면 전체를 다시 생성하는 것이 가능할 것입니다.

Answer 1

나는 잉크 스케이프에 대한 확장을 생성 특히 파이썬을 사용하고 추천 할 것입니다 시작해야합니다. 소스 맵에 필요한 모든 것이 있기 때문에 정말로 원하지 않으면 SVG 60이 정말로 필요하다고 생각하지 않습니다.

내가 할 일은 Inkscape를 사용하여 다양한 영역의 이름을 사용할 언어 코드로 바꾸는 것입니다. 예를 들어 Cahuilla 또는 cah는 현재 SVG 파일에 path13882입니다. 나는 cah 또는 Cahuilla으로 이름을 바꾸고 각 언어 영역에 대해이 과정을 반복합니다. Edit \ XML Editor를 사용하여 모든 경로를 업데이트하십시오.

이름/ID를 업데이트 한 후에는 SVG 스크립팅을 조사 할 수 있습니다. 난 그냥 언어에 대한 관련 정보를 가지고 자바 스크립트/ECMA 스크립트 맵 또는 사전을 만들 것입니다 :

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 

은 그럼 그냥 추가하고 경계 상자의 위치 및 경로의 색상을 변경할 것입니다 마우스 오버 기능을 추가해야합니다. 꽤 날짜가 있지만 이벤트 및 스크립팅에 대해서는 one example입니다. Carto.net에는 대화식지도 예제도 있습니다.

SVG 같은 것을 보일 것이다 : SVG 파일 어떤 자동화를 들어

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

을, 나는 잉크 스케이프 확장을 사용합니다. Developer Tutorials/Extensions의 Inkscape wiki을 확인하십시오. 그렇지 않으면 SVG는 여전히 XML이므로 소스 파일에서 고유 한 이름으로 언어 영역의 이름을 지정한 경우 Python을 사용하여 XML을 구문 분석하고 각 경로/언어 영역을 별도의 파일로 저장할 수 있습니다.

Answer 2

여기에 example지도가 사용됩니다. 요소를 클릭하여 boundingbox를 가져올 수 있으며, 미니 뷰 뷰 박스 (일부 조정할 수 있음)에 사용할 수 있습니다. 보시다시피지도에 코드를 많이 추가하지 않고 몇 가지 요소 만 추가하면됩니다. 모든 viewBox가있을 때 자바 스크립트를 사용하여 미니 뷰 'viewBox'을 즉시 업데이트 할 수 있습니다.

선택한 도형의 색상을 지정하려면요소를 미니 맵 <svg>에 추가하여 기본지도에 사용 된 채우기를 덮어 씁니다 (이 경우 스타일 시트 규칙을 사용해야 할 수도 있음). 그것이 특이성이 높은지, 예를 들어 #miniview .activeshape { fill: red !important }을 추가하는 것.<use>이 선택한 모양을 가리키게하고 가리키는 모양에 class="activeshape"을 추가했는지 확인하십시오.

이

적어도, 그것은 도움이되기를 바랍니다 :)