Я впервые использую SVG, поэтому извиняюсь, если это глупый вопрос, но я пытаюсь создать интерактивную карту континента на своем сайте и получил изображение SVG с правильно нанесенными на карту континентами из Википедии.
http://commons.wikimedia.org/wiki/File:Continents.svg
Однако это изображение имеет размер 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">
Однако это масштабирует только холст как таковой, но не масштабирует внутренние области. Как заставить области масштабироваться до измененных размеров изображения?
4 ответа
SVG будет любого размера, который вы укажете в CSS.
CSS
svg {
width:292px;
height:137px;
border:1px solid grey
}
Это работает с размерами, указанными в SVG, или без них. важным элементом является «окно просмотра», которое устанавливает структуру координат для SVG.
Единственный способ, который я нашел до сих пор, - это обернуть все мои области тегом и применить шкалу
<g transform="scale(0.68)">
Используйте 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/
Добавьте атрибут 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 по-другому.
svg { width: 100%; }.