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

http://commons.wikimedia.org/wiki/File:Continents.svg

Map

Однако это изображение имеет размер 585 x 299 пикселей, и мне нужно изображение размером 292 x 137 пикселей. Я читал в Интернете, что эти изображения масштабируются и что все, что вам нужно сделать, это изменить значение ширины и высоты в определении svg, поэтому я сделал это здесь:

<svg width="292" height="137" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">

Однако это масштабирует только холст как таковой, но не масштабирует внутренние области. Как заставить области масштабироваться до измененных размеров изображения?

Rendered map

1
jezzipin 10 Сен 2014 в 15:47

4 ответа

Лучший ответ

SVG будет любого размера, который вы укажете в CSS.

Демо JSfiddle

CSS

svg {
    width:292px;
    height:137px;
    border:1px solid grey      
}

Это работает с размерами, указанными в SVG, или без них. важным элементом является «окно просмотра», которое устанавливает структуру координат для SVG.

1
Paulie_D 10 Сен 2014 в 12:31

Единственный способ, который я нашел до сих пор, - это обернуть все мои области тегом и применить шкалу

<g transform="scale(0.68)">
0
jezzipin 10 Сен 2014 в 12:01

Используйте viewBox следующим образом:

 <svg 
 xmlns="http://www.w3.org/2000/svg" 
 version="1.0"
 width="292pt" height="137pt"
 viewBox="0 0 468 239"
 preserveAspectRatio="xMidYMid meet"
 >
 <g 
 transform="translate(0,239) scale(0.016963,-0.016963)"
 fill="#000000"
 stroke="none"
 >

http://jsfiddle.net/Vac2Q/4147/

0
Thibaud Granier 10 Сен 2014 в 12:30

Добавьте атрибут viewBox (вероятно, viewBox = "0 0 585 299" что вы хотите) в элемент svg. Мы можем смоделировать, как это будет выглядеть, используя идентификатор фрагмента, который наложит viewBox на исходный файл, например.

http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg#svgView(viewBox(0,0,529,290))

Это точно отображается в Firefox по-другому.

0
Robert Longson 10 Сен 2014 в 12:56