Положение окна SVG обычно определяется CSS, а размер устанавливается шириной атрибута и высотой элемента SVG. Однако, если SVG хранится во встроенный объект (например, элемент объекта или другой элемент SVG), а документ, содержащий SVG, отформатирован с помощью CSS или XSL, и CSS или другие значения размера этих периферийных объектов уже могут рассчитывать размер окна, тогда будет использоваться размер периферического объекта.
Здесь нам нужно различать концепции Windows, систем координат окон и систем координат пользователей:
Окно : относится к видимой прямоугольной области на веб -странице, с ограниченной длиной и шириной, и эта область обычно связана с размером периферического объекта. Система координат окна : по сути система координат с происхождением, оси X и осью Y; И это простирается бесконечно в обоих направлениях. По умолчанию происхождение находится в верхнем левом углу окна, ось X горизонтально справа, а ось Y вертикально вниз. Точки в этой системе координат могут быть преобразованы. Система координат пользователя : по сути система координат с происхождением, оси X и осью Y; И это простирается бесконечно в обоих направлениях. По умолчанию происхождение находится в верхнем левом углу окна, ось X горизонтально справа, а ось Y вертикально вниз. Точки в этой системе координат могут быть преобразованы.По умолчанию система координат окна и система координат пользователя перекрываются, но здесь следует отметить, что система координат окна принадлежит элементу, который создает окно. После определения системы координат окон, будет определен тон координат всего окна. Однако система координат пользователя принадлежит каждому графическому элементу. Пока график имеет преобразование координат, будет создана новая система координат пользователя. Все координаты и размеры в этом элементе используют эту новую систему координат пользователя.
Проще говоря: система координат окна описывает начальный профиль координаты всех элементов в окне, а система координат пользователя описывает профиль координаты каждого элемента. По умолчанию все элементы используют систему координат пользователя по умолчанию, которая совпадает с системой координат окна.
Координировать трансформацию пространства Давайте рассмотрим преобразование пользовательских координат Canvas, которые реализованы с помощью функций перевода, масштабирования и вращения; Каждое преобразование будет работать на рисунках, нарисованных позже, если только преобразование не будет выполнено снова, что является концепцией текущей системы координат пользователя. Canvas имеет только одну систему координат пользователя.В SVG ситуация совершенно другая. В качестве элемента векторного графа сам SVG может быть по существу рассматриваться как системы координат пользователя; Оба координатных пространства SVG могут быть преобразованы: преобразование пространства окна и преобразование пространства пользователя. Преобразование пространства окна контролируется видом на свойство соответствующих элементов (эти элементы создают новые окна); Преобразование пространства пользователя контролируется атрибутом преобразования элемента графика. Преобразование пространства окна применяется к соответствующему всему окну, а преобразование пространства пользователя применяется к текущему элементу и его дочерним элементам.
Преобразование окон - свойство ViewboxВсе элементы, которые могут создать окно (см. Следующий раздел), а также маркер, шаблон и элементы просмотра, имеют атрибут Viewbox.
Формат значения атрибута Viewbox составляет (x0, Y0, U_WIDTH, U_HEight), и каждое значение разделено запятой или пространством. Они совместно определяют область, отображаемую окном: координаты верхнего левого угла окна установлены на (x0, y0), ширина окна установлена на U_width, а высота - U_Height; Это преобразование работает для всего окна.
Не путайте здесь: размер и положение окна были определены элементом, который создает окно и периферийные элементы (например, окно, созданное наиболее внешним элементом SVG, определяется CSS, шириной и высотой). Viewbox здесь фактически установить эту определенную область, чтобы отобразить какую часть системы координат окна. Настройка Viewbox на самом деле включает в себя два преобразования: масштаб и перевод окна.Расчет преобразования также очень прост: взять окно представления самого внешнего элемента SVG в качестве примера, предполагая, что ширина и длина SVG устанавливаются на ширину, высоту, а настройка Viewbox составляет (x0, Y0, U_Width, U_Height). Затем шкалы ширины и высоты рисованного рисунка: ширина/u_width, высота/u_height соответственно. Координаты верхнего левого угла окна установлены на (x0, Y0).
Испытайте различия в результатах, привлеченных следующими кодами:
<svg viewbox = "0 0 200 200">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
На рисунке, нарисованном в примере выше, вы можете увидеть зеленые и красные прямоугольники. В этом случае точки в системе координат окна все еще соответствуют точкам в окне, что также является по умолчанию.
<svg viewbox = "0 0 100 100">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
На рисунке, нарисованном в примере выше, вы можете увидеть только зеленый прямоугольник, а зеленый прямоугольник отображается на экране с 200*200 пикселями. В настоящее время точки координат больше не едины, и фигура увеличена.
<svg viewbox = "0 0 400 400">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
На рисунке, нарисованном в приведенном выше примере, единицы системы координат окна уменьшаются, поэтому оба прямоугольника уменьшаются.
В ежедневной работе одна задача, которую мы часто должны выполнять, - это масштабировать набор графики, чтобы адаптировать ее к своему родительскому контейнеру. Мы можем достичь этого, установив свойство Viewbox.
Элементы , которые могут создавать новые окна В любое время мы можем гнездовать окна. При создании нового окна будет создана новая система координат окна и система координат пользователя, и, конечно, будет создан новый, включая путь отсечения. Ниже приведен список элементов, которые могут создать новое окно: SVG : SVG поддерживает гнездование. Символ : Создайте новое окно при создании элемента использования. Изображение : новое окно создается при ссылке на элемент SVG. ForeignObject : Создайте новое окно, чтобы отобразить объект внутри. Продолжайте масштабировать свойство ScaleSpectRatio Иногда, особенно при использовании Viewbox, мы ожидаем, что графика будет занимать все окно, а не масштабировать в одной и той же пропорции в обоих направлениях. Иногда мы надеемся, что два направления фигуры масштабируются в фиксированной шкале. Используйте атрибут PreserveasPectratio, чтобы достичь цели управления этим.Это свойство - все элементы, которые могут создать новое окно, плюс изображение, маркер, шаблон и элементы просмотра. Более того, атрибут консервисного спектра будет работать только после того, как ViewBox будет установлен на элемент. Если Viewbox не установлен, свойство PreserveasPectratio игнорируется.
Синтаксис атрибута заключается в следующем: Preserveaspectratio = [defer] <lignight> [<semorslice>]
Обратите внимание, что 3 параметра должны быть разделены пространствами.
Определение : необязательный параметр, действительный только для элементов изображения. Если значение атрибута PreserveasPectratio в элементе изображения начинается с DEFER, это означает, что элемент изображения использует коэффициент масштабирования ссылочного изображения. Если ссылочное изображение не имеет коэффициента масштабирования, то DEFE игнорируется. Все остальные элементы игнорируют эту строку. Выравнивание : этот параметр определяет выравнивание единого масштабирования, и можно принять следующие значения:Нет - невынужденное унифицированное масштабирование, так что графика могла полностью заполнить весь просмотр.
Xminymin-силовое равномерное масштабирование и выравнивает <min-x> и <nin> в Viewbox с минимальными значениями x и y y viewport.
Xmidymin - силу единого масштабирования и выравнивает среднюю точку в направлении x в ViveWbox в среднюю точку направления X направления видового вида. Короче говоря, средняя точка в направлении x выровнена, и направление y такое же, как и выше.
Xmaxymin - силовое равномерное масштабирование и выравнивает <min -x> + <width> в виде просмотра на максимальное значение x viewport.
Существуют и другие типы значений, аналогичные: Xminymid, Xmidymid, Xmaxymid, Xminymax, Xmidymax, Xmaxymax. Значение этих комбинаций аналогично вышеуказанным ситуациям.
Meetorslice : необязательный параметр, вы можете использовать следующие значения:Встреча - значение по умолчанию, равномерно масштабировать графику, так что вся графика отображается в видовом доке.
Срез - Единое масштабирование графики, позволяющее графике заполнить порт View, и излишки вырезаны.
На следующем рисунке объясняется влияние различных заполнений:
Преобразование системы координат пользователя - атрибут преобразования Этот тип преобразования определяется путем установки свойства преобразования элемента. Здесь следует отметить, что преобразование элемента, установленного атрибутом преобразования, влияет только на элемент и его дочерние элементы, не имеет ничего общего с другими элементами и не влияет на другие элементы. Перевод - Перевод Преобразование трансляции переводит соответствующие значения координат в указанную позицию, и преобразование должно быть передано в сумму, переведенную на обеих оси. Смотрите пример:<rect x = "0" y = "0" transform = "translate (30,40)" />
Этот пример рисует прямоугольник и переводит его отправную точку (0,0) на (30,40). Хотя значение координаты (x, y) может быть установлено напрямую, также очень удобно реализовать его с помощью преобразования перевода. Второй параметр этого преобразования может быть опущен, а по умолчанию обрабатывается при обработке 0.
Вращаться - вращаться Вращение элемента также является очень распространенной задачей. Мы можем использовать преобразование вращения для его реализации, что требует передачи параметра угла поворота. См. Пример:<rect x = "20" y = "20" transform = "utate (45)" />
В этом примере показан прямоугольник поворота на 45 градусов. Несколько заметок:
1. Преобразование здесь принимает значение угла в качестве параметра.
2. Вращение относится к вращению относительно оси X.
3. Вращение расширяется вокруг происхождения (0,0) системы координат пользователя.
Наклонившись - перекосит Преобразование также подтверждает преобразование наклона, которое можно наклонить вдоль оси X (левая и левая и правая углы наклонены вправо, что фактически наклоняется к оси Y) или вдоль оси Y (вверх и вниз, что наклоняется к углу вниз, который фактически наклонен к оси x). Это преобразование требует угла параметра угла, который будет определять угол наклона. См. Следующий пример:<svg>
<rect x = "0" y = "0" fill = "green" />
<circle cx = "15" cy = "15" r = "15" fill = "red" />
<circle cx = "15" cy = "15" r = "15" fill = "желтый" transform = "skewx (45)" />
<rect x = "30" y = "30" />
<rect x = "30" y = "30" transform = "skewx (45)" />
<rect x = "30" y = "30" Transform = "skewy (45)" />
</svg>
Из результата вы можете напрямую увидеть положение и форму прямоугольника одного и того же размера после различных преобразований наклона. Обратите внимание, что начальная позиция прямоугольника изменилась, потому что в новой системе координат (30,30) уже находится в разных положениях.
Масштаб масштаба Объект масштабирования завершается преобразованием масштабирования, которое принимает 2 параметры, указывая коэффициенты масштабирования на горизонтальном и вертикальном соответственно. Если второй параметр пропущен, принимается то же значение, что и первый параметр. См. Следующий пример:<svg>
<текст x = "20" y = "20" font-size = "20"> ABC (Scale) </text>
<текст x = "50" y = "50" font-size = "20" Transform = "Scale (1,5)"> ABC (Scale) </text>
</svg>
Матрица преобразования - матрица Любой, кто изучал графику, знает, что все преобразования фактически представлены матрицами, поэтому вышеуказанные преобразования могут быть представлены матрицей 3*3:туз
BDF
0 0 1
Поскольку используются только 6 значений, он также сокращается как [ABCDEF]. Назначьте матрицу (A, B, C, D, E, F) преобразовать, чтобы реализовать соответствующее преобразование. Преобразование преобразует как координаты, так и длину в новые измерения. Соответствующие матрицы вышеуказанных преобразований следующие:
Преобразование перевода [1 0 1 0 TX TY]:
1 0 TX
0 1 Тай
0 0 1
Преобразование масштабирования [SX 0 0 SY 0 0]:
SX 0 0
0 sy 0
0 0 1
Вращательное преобразование [cos (a) sin (a) -sin (a) cos (a) 0 0]:
cos (a) -sin (a) 0
грех (а) cos (a) 0
00 1
Наклон вдоль оси X [1 0 tan (a) 1 0 0]:
1 загар (а) 0
0 1 0
0 0 1
Наклон вдоль оси y [1 tan (a) 0 1 0 0]:
11 0
Тан (а) 1 0
00 1
Изменить суть Когда мы суммировали холст раньше, мы знали, что к системе координат пользователя применяются все виды преобразований. В SVG все преобразования также предназначены для двух систем координат (по сути, системам пользовательских координат). После указания атрибута Transform в объект контейнера или объекта графика или указания атрибута ViewBox в SVG, символ, маркер, шаблон, представление, SVG будет преобразовать в соответствии с текущей системой координат пользователя для создания новой системы координат пользователя и действовать на текущий объект и его подразделы. Единицы координат и длины, указанные в этом объекте, больше не соответствуют 1: 1, соответствующей системе периферической координат, но преобразуются в новую систему координат пользователя по мере деформации; Эта новая система координат пользователя действует только на текущий элемент и его детские элементы. Цепочка преобразования Свойство Transform поддерживает установку нескольких преобразований. Эти преобразования просто разделены пространствами посередине и расположены вместе в свойство. Эффект выполнения такой же, как и выполнение этих преобразований независимо по порядку.<g transform = "Translate (-10, -20) Шкала (2) вращение (45) Перевести (5,10)">
<!-графические элементы идут сюда->
</g>
Приведенный выше эффект такой же, как и следующее:
<g transform = "translate (-10, -20)">
<g transform = "Scale (2)">
<g transform = "utate (45)">
<g transform = "transtate (5,10)">
<!-графические элементы идут сюда->
</g>
</g>
</g>
</g>
единица Наконец, давайте поговорим о единицах. Любые координаты и длины могут быть оснащены единицами и без него. Без единицыСчитается, что значение без единиц имеет пользовательские единицы, что является единичным значением текущей системы координат пользователя.
Ситуация принести подразделенияСоответствующие подразделения в SVG такие же, как и в CSS: EM, EX, PX, PT, PC, CM, MM и IN. % Также можно использовать для длины.
Относительные единицы измерения: EM и EX также аналогичны CSS, относительно шрифта и X-высота текущего шрифта.
Абсолютная единица измерения: один PX равен пользовательскому блоку, то есть 5px такой же, как 5.
Другие единицы в основном являются множеством PX: 1PT = 1,25px, 1pc = 15px, 1 мм = 3,543307px, 1cm = 35,43307px, 1in = 90px.
Если ширина и высота самого внешнего элемента SVG не указывают единицы (то есть пользовательские единицы), эти значения будут считать PX.
Об этой статье довольно сложно поговорить. Фактически, просто помните, что координаты и длина графического элемента относятся к координатам и длине новой системы координат пользователя после двойного преобразования системы координат окна и преобразования системы координат пользователя. Практическая ссылка: Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspxЦентр разработки: https://developer.mozilla.org/en/svg
Популярная ссылка: http://www.chinasvg.com/
Официальный документ: http://www.w3.org/tr/svg11/