Я показываю диаграммную карту с использованием SVG, и она должна быть пропорциональной (т. Е. Не перекошена x/y).Как создать сцену SVG с координатами пользователя для заполнения экрана
Изображение заполняет весь экран, поэтому внешний элемент всегда 100%/100%. Другими словами я хочу окно просмотра, чтобы всегда заполнить окно браузера (в пределах ограничений соотношения сторон), например:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events" >
<defs>
<solidColor xml:id="solidBlack" solid-color="black" />
<solidColor xml:id="solidLightGray" solid-color="lightgrey" />
</defs>
<style>
.Border { fill:none; stroke:red; stroke-width="2px" }
.TitleBlock { fill:none; stroke:black; stroke-width="1px" }
</style>
<svg x="0" y="0" width="100%" height="100%" viewbox="0 0 1000 1000" >
<rect x="2" y="2" width="99%" height="99%" class="Border" />
<svg viewbox="500 500 500 500">
<circle cx="30" cy="20" r="10px" fill="red" />
<circle cx="450" cy="30" r="10px" fill="blue" />
<circle cx="40" cy="490" r="10px" fill="green" />
</svg>
</svg>
</svg>
Когда это делает, значения интерпретируются как пиксели, а не пользовательские координаты. Так, например, зеленая точка должна быть около нижней части экрана (поскольку она находится в нижней части окна просмотра), но на самом деле она находится посередине экрана, потому что она интерпретирует 490 как 490 пикселей.
Для дальнейшего уточнения размеры 1000 × 1000 общей площади карты являются координатами пользователя. Например, предположим, что я занимаюсь космической игрой, а игровая зона составляет 1000 парсек x 1000 парсеков. Любой конкретный вид этой области карты должен заполнить экран.
Update
На основании ответа одной фундаментальной проблемы заключается в том, чтобы заполнить экран, мне нужно использовать 100% в наружном элементе SVG. Тем не менее, даже после того, как сделать это, изображение не масштабирование и использования пользователя координаты:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="100%" height="100%"
viewBox="0 0 100000 100000" >
<defs>
<solidColor xml:id="solidBlack" solid-color="black" />
<solidColor xml:id="solidLightGray" solid-color="lightgrey" />
</defs>
<style>
.Border { fill:none; stroke:red; stroke-width="2px"; }
.TitleBlock { fill:none; stroke:black; stroke-width="1px"; }
}
</style>
<rect y="2" width="100%" height="100%" class="Border" />
<svg viewBox="50000 50000 100000 100000" >
<circle cx="52000" cy="52000" r="10px" fill="red" />
<circle cx="95000" cy="53000" r="10px" fill="blue" />
<circle cx="54000" cy="99000" r="10px" fill="green" />
</svg>
</svg>
Это даже не появляется на всех, показывая, что использует ПИКСЕЛИ координационные не пользователь.
# 3 Это то, что мне нужно, но проблема в том, что вы используете PIXELS, а не полный экран. Значения - это координаты пользователя. Например, если зеленый был на (500000, 990000), а в окне просмотра было «500000 500000 1000000 1000000», тогда в левом нижнем углу окна просмотра (окне браузера) должен появиться зеленый цвет (см. Мой новый пример выше). –
Последние два значения viewBox - это ширина и высота, а не maxX, maxY. Итак, для примера в вашем комментарии зеленый круг не будет внизу слева. Он будет на полпути вниз с левой стороны. http://jsfiddle.net/ab8etatv/ –
Если высота окна равна 1000000, а зеленая y-координата - 990000, то она находится внизу. –