SVG / y-координата отличается

Файл svg: http://pastebin.com/8N61VpS1

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

<rect
   style="fill:#000000"
   id="rect3409"
   width="166.39345"
   height="180.32787"
   x="77.049179"
   y="611.37854" />
Прямоугольник "rect3409" имеет координаты (x, y) = (77.049, 260.656) в Inkscape 0.91 r13725.

Однако, тег <rect> с кодом rect3409 и (х, г) = (77.049, 611.379). Почему между ними существуют различия?

Я хочу получить правильную координату SVG прямоугольника. Как мне это сделать?

1 3
svg inkscape

1 ответ:

Если вы посмотрите на источник, то увидите, что #rect3409 имеет родительский элемент g: 

<g transform="translate(0,-452.36216)">
  <!-- snip -->
  <rect
    id="rect3409"
    width="166.39345"
    height="180.32787"
    x="77.049179"
    y="611.37854" />
</g>

Атрибут transform=translate(tx, ty) на g применяется к измерениям #rect3409. Таким образом, вертикальная ось rect идет от y + ty к y + h + ty, то есть от 611 - 452 == 159px к 611 + 180 - 452 == 339px. я думаю, что это "правильные значения координат SVG", которые вы хотите.

Но Inkscape сообщает не эти значения, а скорее 261px в 441px. Похоже, что Inkscape на самом деле переворачивает ось y: в SVG (и обычно во всех компьютерных графиках) y=0 находится в верхней части экрана, а y увеличивается по мере перемещения вниз экрана. Например, следующая SVG отображает красный прямоугольник над синим: 
<svg>
  <rect x="0" y="0" width="10" height="10" fill="red" />
  <rect x="0" y="10" width="10" height="10" fill="blue" />
</svg>
В Inkscape, однако, у вас есть математическое соглашение y=0 внизу, и y увеличивается, когда вы идете вверх. Поэтому координаты, которые вы видите в Inkscape, изменяются от "истинных" координат SVG (спасибо @squeamish ossifrage за указание этого в комментариях): y_Inkscape = h_image - y_SVG, где y_Inkscape - то, что говорит Inkscape, Вы, y_SVG - то, что находится в файле, и h_image - общая высота изображения.

Ваш образец изображения имеет ровно 600 пикселей в высоту, поэтому координаты "Inkscape" #rect3409 являются
600 - 339 == 261px, и еще
600 - 159 == 441px.

3