Архивы Уроки SVG - Xiper
-
Сокращение путей
добавленоТак как любой нетривиальный рисунок будет содержать многие десятки пар координат, элемент
имеет сокращенную вариант записи, чтобы представить путь минимальным количеством байт — из «Сущность SVG» -
Paths. Moveto, lineto, и closepath
добавленоЭлемент
способен создавать фигуры произвольной формы с помощью произвольного числа отрезков и кривых, связанных между собой — из «Сущность SVG» -
Трансформации skewX и skewY
добавленоВ SVG имеется еще две трансформации: skewX и skewY. Они позволяют наклонить одну из осей — из «Сущность SVG»
-
Масштабирование вокруг точки
добавленоТак же как в SVG возможно вращение вокруг произвольной точки, возможно и масштабирование — из «Сущность SVG».
-
Конвертация из декартовой системы координат
добавленоНа практике можно столкнуться с задачей: перенести векторный рисунок, созданный в декартовой системе координат, в SVG. Чтобы рисунок отобразился в SVG так же как и в исходной системе, координаты необходимо пересчитать. Чтобы не делать это вручную, можно воспользоваться последовательностью трансформаций, чтобы SVG сам все сделал — из «Сущность SVG».
-
Трансформация в SVG: поворот
добавленоО вращении системы координат и отдельных объектов в SVG — из «Сущность SVG».
-
Последовательность трансформаций
добавленоДля объекта количество возможных трансформаций не ограничивается одной: можно задать несколько. При этом конечный результат зависит от порядка преобразований — из «Сущность SVG».
-
Трансформация в SVG: перемещение
добавленоДля трансформаций (преобразований) фигур в SVG используется атрибут transform. Чтобы переместить объект нужно применить translate — одно из доступных значений transform — из «Сущность SVG».
-
Трансформация в SVG: масштабирование
добавленоSVG объектам можно изменять размеры масштабируя систему координат. Для этого используем значение scale атрибута transform — из «Сущность SVG».
-
Группирование и привязка SVG объектов
добавленоО различных вариантах группировки в SVG: элементы g, use, defs, symbol, image — из «Сущность SVG».
-
Структура и представление
добавленоSVG позволяет разделять структуру документа и его представление. Сейчас попробуем сравнить и сопоставить эти два понятия, обсудить аспекты представления документа более детально и показать некоторые элементы SVG, которые Вы сможете использовать для того, чтобы сделать структуру Вашего документа более четкой, читаемой и более простой в обслуживании — из «Сущность SVG».
-
Ломанная линия
добавленоВ конце нашего «обзора» основных фигур, мы рассмотрим ломанные линии — из «Сущность SVG».
-
Многоугольник
добавленоВ дополнение к прямоугольнику, кругу и эллипсу, можно так же нарисовать шестиугольник, восьмиугольник, звезду или другие произвольные фигуры замкнутой формы. Элемент
позволяет это реализовать. -
Круги и эллипсы
добавленоЧтобы нарисовать круг, используйте элемент
, для эллипса — . -
Линии
добавленоРисуем прямые линии — используем
. Характеристики кисти: толщина, цвет, прозрачность, прерывистость.