Глиф провинции / размеры шрифта не выравниваются-Интерактивная карта ЮАР


Мне нужно построить интерактивную карту Южной Африки, чтобы, когда кто-то нажимает на провинции, отображалась правильная карта Google. В конце концов я решил преобразовать векторную карту южноафриканских провинций, которую я должен использовать для шрифтов/глифов. Это сработало очень хорошо, и вы можете посмотреть их здесь.

Http://vane.co.za/files/south-african-province-glyphs/demo.html

EDIT: я добавил jsFiddle здесь для карты

Карта одна вся карта Южной Африки с ее различными провинциями, поэтому я взял каждую провинцию из иллюстратора и скопировал их в новый документ. Затем я обрезал белую доску, чтобы она точно подходила по краям, гарантируя, что каждый сохраненный файл SVG был точным.

Я сохранял каждый файл как SVG и импортировал его в IcoMoon, который затем преобразовал его в шрифт для меня. Пока все хорошо.

Я бы предположил, что когда я импортирую эти шрифты без размера шрифта, они все должны отображаться в их первоначальный размер, так что я могу собрать вместе различные карты провинций в одну целую карту Южной Африки, но это не так.

Я думал, что, давая им равные размеры ЭМ, они будут масштабироваться пропорционально, так что каждый из них будет иметь свой собственный правильный размер, но это тоже не сработало.

Есть ли способ сопоставить эти карты так, чтобы они все идеально соответствовали карте страны снова?

Надеюсь, это имеет смысл?

Редактировать:

Я ушел. назад к http://icomoon.io где я сгенерировал глифы и выяснил, что они создаются в 16px X 16px. Однако, даже если я масштабирую их на px в соответствии с размером, который я хочу, они все равно не вставляются друг в друга правильно.

В Firebug я обнуляю все размеры шрифтов и использую инспектор макетов. Это все размеры ширины, которые мне удалось получить; высота-все 16px.

North-West     - 22px 
Limpopo        - 24
Mpumalanga     - 15px
KwaZulu-Natal  - 13px
Gauteng        - 15px
Free-State     - 19px
Eastern-Cape   - 24px
Western-Cape   - 20px
Northern-Cape  - 15px

Пример ниже - это моя попытка масштабировать глифы вручную, но более мелкие провинции можно увидеть в левом верхнем углу.

Редактировать: Это фактические размеры, которые они должны быть, чтобы они могли красиво складываться вместе внутри этого белого блока:

North-West     - 75.684px
Limpopo        - 73.217px
Mpumalanga     - 50.286px
KwaZulu-Natal  - 53.248px
Gauteng        - 25.817px
Free-State     - 72.984px
Eastern-Cape   - 99.397px
Western-Cape   - 84.725px
Northern-Cape  - 120.514px

Введите описание изображения здесь

1 2

1 ответ:

Вы обрезали художественные доски каждой фигуры, чтобы соответствовать самой фигуре. Это означает, что вы потеряете все относительные размеры между фигурами, как только превратите их в глиф шрифта. Крошечная провинция будет такой же высокой, как и самая большая, если вы изобразите свои глифы в том же font-size.

Самое простое решение-не обрезать монтажные панели фигур. Таким образом, вы сохраняете масштаб каждого глифа:

Введите описание изображения здесь

Небольшие провинции будут иметь много пустого пространства внутри глифа, но они будут все они прекрасно накладываются друг на друга.