SVG изображение - масштабирование и границы - PullRequest
0 голосов
/ 22 октября 2010

У меня есть следующий небольшой svg-файл, размещенный по адресу: http://dl.dropbox.com/u/7393/hmap.svg, и я пытаюсь сделать так, чтобы он выглядел следующим образом: http://dl.dropbox.com/u/7393/final.png

В документах, где я получил это, упоминается, что это изменение может быть легко получено путем изменения пары тегов в файле svg. Однако я попытался изменить все, и я все еще не могу 1) Увеличить, 2) Обрезать, 3) Сделать границы белыми.

Кто-нибудь здесь знаком с форматом файла изображения svg (xml), чтобы указать мне правильное направление?

Спасибо.

1 Ответ

1 голос
/ 25 октября 2010

Для увеличения измените настройки окна просмотра. Файл использует один в первом и единственном теге SVG в верхней части файла. Окно просмотра, которое вы используете, предназначено для полного изображения viewBox="0 -500 2752.766 2537.631", и вы помещаете его в поле с height="476.7276" width="634.26801" пикселями. Таким образом, ширина строки в 1 единицу составит около 1/5 пикселя.

Чтобы увеличить, скажем, в Европе, измените его на ... viewBox="1000 -500 1000 1000" ... это, в основном, говорит, что начинайте с 1000 единиц слева и -500 единиц сверху и обрезайте 1000 единиц справа и 1000 единиц вниз .

Белые линии stroke-width:0.99986893; единиц. чтобы сделать их целым пикселем, вам нужно приблизиться. viewBox="1200 -5 450 450"

Вы используете оба стиля в верхней части документа и встроенные стили, встроенные стили перезаписывают любые другие стили.

<g class="land fr" id="fr" 
 transform="matrix(1.229834,0,0,1.1888568,-278.10861,-149.0924)" 
 style="fill-opacity:1;stroke:#ffffff;stroke-width:10;
       stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1;
       fill:#00ff00">

Ширина обводки около 10 должна работать для полноразмерных изображений, отображаемых на экране 640 x 480 (ширина и высота задаются в первом и единственном теге svg) - но для этого это необходимо сделать для каждого элемента

<path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357
         2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 
         2218.0062,810.62352" 
 id="path2404" 
 style="fill-opacity:1;stroke:#ffffff;stroke-width:0.99986994;
       stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1;
       fill:#6BAED6">

или стиль должен быть удален из элементов, чтобы использовать родительский стиль.

<path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357 
         2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 
         2218.0062,810.62352" id="path2404">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...