Предложения по манипулированию картой SVG - PullRequest
Новая
       11

Предложения по манипулированию картой SVG

10 голосов
/ 13 января 2010

Я работаю над картой родных языков Калифорнии для Википедии.Карта содержит области, каждая из которых соответствует языку.Оригинал выглядит следующим образом (щелкните его, чтобы увидеть SVG ):

image

I want to make "locator maps" for each of those individual languages by hand (in Inkscape ), как этот, для языка под названием Cahuilla (с кодом языка cah):

Ответы [ 2 ]

7 голосов
/ 29 января 2010

Я бы порекомендовал использовать Python и специально создавать расширения для Inkscape. Я не думаю, что вам действительно нужно 60 SVG, если вы действительно не хотите, потому что исходная карта будет иметь все, что вам нужно.

Я бы использовал Inkscape для переименования различных регионов в один и тот же языковой код, который вы будете использовать. Например, Cahuilla или cah в настоящее время path13882 в вашем файле SVG. Я бы переименовал его в cah или Cahuilla и повторил бы процесс для каждой языковой области. Используйте Редактор \ XML Editor, чтобы убедиться, что вы обновили все пути.

После того, как вы обновите имена / идентификаторы, вы можете изучить скрипты SVG. Я бы просто создал карту или словарь javascript / ecmascript, в котором есть соответствующая информация для языка: 

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

Тогда вам просто нужно добавить функцию наведения мыши, которая добавит и поместит ограничивающий прямоугольник и изменит цвет контура. Вот один пример событий и сценариев, хотя он довольно устарел. Carto.net также имеет пример интерактивной карты.

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

Для любой автоматизации с SVG-файлом я бы использовал расширения Inkscape. Посмотрите Inkscape wiki в разделе «Учебники и расширения для разработчиков». В противном случае SVG по-прежнему является XML, поэтому, если вы назвали свои языковые регионы в исходном файле отличительным именем, вы можете использовать Python для анализа XML и сохранения каждого пути / языковой области в отдельном файле.

4 голосов
/ 13 января 2010

Вот пример с использованием вашей карты. Вы можете щелкнуть по любому элементу, чтобы получить ограничивающий прямоугольник, его можно использовать для viewBox miniview (с некоторыми изменениями). Как видите, он не добавляет много кода на карту, просто пара элементов. Когда у вас есть все окна просмотра, вы можете на лету обновлять атрибут miniview 'viewBox', используя javascript.

Для раскраски выбранной фигуры я бы предложил добавить элемент <use> внутри мини-вида <svg>, который имеет заливку, которая переопределяет любую заливку, используемую на главной карте (возможно, вам придется использовать правило таблицы стилей чтобы убедиться, что он обладает высокой специфичностью, например, добавив #miniview .activeshape { fill: red !important }. Позвольте <use> указать на выбранную фигуру и убедитесь, что вы добавили class="activeshape" к фигуре, на которую указали.

Это должно быть, по крайней мере, начало, надеюсь, это поможет:)

...