Почему трансформации сдвигают всю систему кординатов, а не просто перемещают элемент в SVG? - PullRequest
Новая
       32

Почему трансформации сдвигают всю систему кординатов, а не просто перемещают элемент в SVG?

0 голосов
/ 06 октября 2018

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

Чего это помогает достичь вместо вычисленияновые кординаты для рассматриваемого элемента?

Я думаю, что в canvas и CSS такое же поведение, так что тегирование javascript и CSS также.

1 Ответ

0 голосов
/ 06 октября 2018

Я не уверен, что понимаю ваш вопрос, но позвольте мне попробовать:

  1. Преобразованный элемент может быть не элементом графики, а контейнером, например, элементом <g>.В этом случае все дочерние элементы наследуют преобразованную систему координат.

  2. Элемент может иметь связанные серверы рисования (например, узор или градиент) или фильтры, маски или обтравочные контуры, которые имеют своисобственные механизмы определения размера и позиционирования.Эти механизмы работают в преобразованной системе координат.

    Вот пример для иллюстрации.Первый прямоугольник имеет линейный градиент, вектор градиента которого определяется в пространстве пользователя.Второй прямоугольник идентичен, но повернут и переведен в сторону.Затем градиент перемещается вместе с прямоугольником. 

<svg width="200" height="150">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
        x1="0" y1="50" x2="100" y1="50">
      <stop stop-color="red" offset="0"/>
      <stop stop-color="blue" offset="1"/>
    </linearGradient>
  </defs>
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" />
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" transform="translate(200, 20) rotate(90)" />
</svg>

В то время как атрибут transform принимает только координаты пространства пользователя, то есть числа без единиц измерения, атрибуты позиционирования и размеров, такие как x, y, ширина и высота и т. Д., Могут иметь идентификаторы единиц измерения, такие как процентное соотношение, em или другие идентификаторы единиц CSS,Это делает возможным более универсальное позиционирование.

Например, следующий прямоугольник всегда будет иметь одинаковый размер в середине SVG, независимо от его изменения: 

<svg width="100%" height="100%">
  <rect x="50%" y="50%" width="60" height="60" transform="translate(-30, -30)" />
</svg>
...