Озадаченный SVG viewBox, width, height и т. д

Если бы мое понимание SVG было правильным, следующие два описания SVG привели бы к идентичным изображениям, но они этого не делают. (Примечание: два списка кода отличаются только значениями координат в их svg теги. Более конкретно, для каждого (x, y) пара в первом списке есть (x-205, y-55) пара во втором листинге.)

<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     x="0" y="0" width="210" height="60" viewBox="0 0 210 60">

      <g style="stroke: black; fill: none;">
        <path d="M 5 5 Q 105 55 205 55"/>
      </g>

    </svg>

  </body>
</html>


<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     x="-205" y="-55" width="210" height="60" viewBox="-205 -55 5 5">

      <g style="stroke: black; fill: none;">
        <path d="M -200 -50 Q -100 0 0 0"/>
      </g>

    </svg>

  </body>
</html>

на самом деле, согласно Firefox по крайней мере, они выглядят совсем по другому. Рендеринг, который я ожидал для обоих из них, - это то, что Firefox предоставляет для первого (а именно, кривая, плавно наклоняющаяся слева направо, с начальным наклоном -1/2 и конечным наклоном 0). Я совершенно сбит с толку тем, что FF производит для второго, потому что, AFAICT, вторая спецификация-это простой оптовый ("жесткий") перевод вектором (-205, -55) первого.

почему два дисплея не выглядят идентичные?

6
svg

3 ответов

потому что координаты viewbox не x1, y1, x2, y2 - они шалунья, miny, ширина и высота.

10

для precis на viewBox см. (только) рисунок в этой статье:https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg, inlined ниже для удобства:

viewBox in a nutshell

эта картина стоит 1000 слов объяснения.

параметры ширины и высоты, а также видовое окно в терминологии W3C-это другое. Но нет в приведенном выше примере. Существует немного сложный алгоритм для определения, действительно ли ширина и высота из SVG что-либо делают, потому что они могут быть переопределены, например,<object> тег, который вставляет SVG в HTML-страницу. Есть больше угловых случаев, объясненных в http://www.w3.org/TR/SVG/coords.html#ViewportSpace. Для более визуально ориентированного (и, возможно, более доступного) объяснения этой проблемы видового экрана вы также можете обратиться к руководству Inkscape http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html (в стороне, есть расширение, доступное, чтобы установить viewBox визуально из Inkscape http://pernsteiner.org/inkscape/viewbox/; вам действительно не нужно редактировать XML напрямую, как говорится в руководстве Inkscape [still].)

9

очень поздно на этот раз, но чтобы прояснить момент, Майкл сделал выше для будущих зрителей:

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

одна проблема, с которой вы сталкиваетесь, заключается в том, что вы думаете, что min-x + width должен быть одинаковым в любом узле svg. min-x и min-y - это левая и верхняя координаты viewBox - эффективно изменить 0, 0 позицию min-x, min-y, и действительно только для система координат viewBox(and by extension to yourпуть'sdпанели viewBox`.

кроме того, положение x и y svg node действительны, но игнорируются и не имеют ничего общего с любым размещением.

таким образом, чтобы ваш второй путь выглядел как ваш первый, вы можете удалить x и y атрибуты, и изменить width и height номера внутриviewBox чтобы соответствовать первому:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 width="210" height="60" viewBox="-205 -55 210 60">

  <g style="stroke: black; fill: none;">
    <path d="M -200 -50 Q -100 0 0 0"/>
  </g>

</svg>
0