Введение в SVG 2D в HTML5 - Введение и использование графического чертежа (основные формы)

Автор：Eve Cole Время обновления：2025-04-03 02:00:03

Основная форма

SVG предоставляет много основных форм, и эти элементы могут быть использованы напрямую, что намного лучше, чем холст. Давайте не будем говорить о глупости, просто посмотрите на примеры, это самое прямое:

<svg>

<строка x1 = "10" x2 = "50" y1 = "110" y2 = "150" ход = "оранжевый" fill = "прозрачный" strck-width = "5"/>

<Полилин точки = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

Inscle = "Orange" Fill = "прозрачный" sturk-width = "5"/>

<Полигоны точки = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

Insck = "green" fill = "прозрачный" sturk-width = "5"/>

<Путь D = "M20,230 Q40,205 50,230 T90,230" FILL = "none" Щелк = "синий" stuck-width = "5"/>>

</svg>

Результаты, отображаемые в этом HTML, следующие:

Этот пример рисует много форм: нормальные прямоугольники, округлые прямоугольники, круги, эллипсы, прямые линии, полигоны и пути. Это все основные графические элементы. Хотя есть много способов нарисовать график, например, прямо, можно реализовать с помощью прямого или пути, мы все равно должны стараться сохранить содержание SVG коротким и кратким и легким для чтения .

Ниже приведены инструкции по использованию каждой формы (существуют только основные свойства, которые управляют формой и положением рисунка, и такие свойства, как заполнение, суммируются позже).

Прямоугольник - прямое элемент

Этот элемент обладает 6 свойствами, которые контролируют позиции и формы, а именно:

X: x Значение координат (система координат пользователя) верхнего левого угла прямоугольника.

Y: Значение Y координат (система координат пользователя) верхнего левого угла прямоугольника.

Ширина: прямоугольная ширина.

Высота: высота прямоугольника.

RX: Когда достигнут округлый угловой эффект, радиус округленного угла вдоль оси X.

RY: При достижении закругленного углового эффекта радиус округленного угла вдоль оси Y.

Например, в приведенном выше примере достигается закругленный угловой эффект, и вы также можете достичь эффекта углового эллипса, установив RX и RY на разные значения.

Круг - Элемент круга

Свойства этого элемента просты, главным образом для определения центра и радиуса:

R: радиус круга.

CX: X-значение центральной координаты.

Cy: y значение центральной координаты круга.

Эллипс - элемент эллипса

Это более общий круглый элемент. Вы можете контролировать длину полуотгольной оси и полумажной оси соответственно для достижения различных эллипсов. Легко думать, что когда два полуаксиса равны, это идеальный круг.

RX: Полуооооора оси (x радиус).

Ry: полу-короткая ось (Y-радиус).

CX: X-значение центральной координаты.

Cy: y значение центральной координаты круга.

Линия - Элемент линии

Прямая линия должна определить начальную точку и конечную точку:

x1: начальная точка x координата.

Y1: начальная точка y координата.

x2: Координата конечной точки x.

Y2: Координата конечной точки Y.

Полилин - полилиновый элемент

Полилины в основном должны определить конечные точки каждого сегмента линии, поэтому в качестве параметров требуется только набор одной точки:

Точки: серия точек, разделенных пространствами, запятыми, новыми линиями и т. Д. Каждая точка должна иметь 2 числа: x значение и значение y. Таким образом, следующие 3 балла (0,0), (1,1) и (2,2) могут быть записаны как: 0 0, 1 1, 2 2.

Полигон - полигонный элемент

Этот элемент должен сделать еще один шаг, чем элемент полилины, подключить последнюю точку и первую точку с образованием закрытой фигуры. Параметры одинаковы.

Путь - элемент пути

Это самый общий и мощный элемент; Используя этот элемент, вы можете реализовать любую другую фигуру, не только основные формы выше, но и сложные формы, такие как кривая Безера; Кроме того, использование пути может достичь плавных сегментов перехода. Хотя полилин также может быть использован для достижения этого эффекта, необходимо предоставить много точек, и эффект не является хорошим, если он увеличивается. Этот элемент управляет положением и формой только с одним параметром:

D: серия инструкций рисования и параметров рисования (точки).

Инструкции по рисованию разделены на два типа: Абсолютные инструкции по координат и относительные инструкции по координат. Буквы, используемые в этих двух инструкциях, одинаковы, то есть верхний и нижний чехол отличается. Абсолютные инструкции используют верхние буквы, а координаты также являются абсолютными координатами; Относительные инструкции используют соответствующие строчные буквы, а координаты точек представляют собой смещения.

Абсолютная инструкция по рисованию координат

Параметры этого набора инструкций представляют абсолютные координаты. Предполагая, что текущая щетка расположена по адресу (x0, y0), следующая абсолютная координатная инструкция представляет значение следующим образом:

инструкция	параметр	иллюстрировать
М	XY	Переместите щетку в точку (x, y)
Л	XY	Щетка вытягивает линейный сегмент от точки точки до точки (x, y)
ЧАС	х	Щетка протягивает горизонтальную линейную сегмент от точки точки до точки (x, y0)
V.	у	Кисточка вытягивает сегмент вертикальной линии от точки точки до точки (x0, y)
А	RX RY X-ось-ротация	Щетка вытягивает дугу от точки точки до точки (x, y)
В	x1 y1, x2 y2, xy	Щетка вытягивает кубическую кривую Безера из точки точки до точки (x, y)
С	x2 y2, xy	Специальная версия кубической кривой Безера (первая контрольная точка опущена)
Q.	x1 y1, xy	Нарисуйте квадратичную кривую Безера в точку (x, y)
Т	XY	Специальная версия квадратичной кривой Безера (контрольные точки опущены)
Z.	Нет параметров	Нарисуйте закрытый рисунок, и если атрибут D не указывает команду Z, то нарисуйте сегмент линии вместо графства.

Переместите команду Brush M, нарисуйте команду линии: L, H, V и закройте команду z - все это относительно просты; Ниже приводится внимание на нескольких инструкциях по рисованию кривой. Инструкция по рисованию дуги: RX RY X-ось-ротация

Более сложно подключить 2 балла с дугой, и есть много ситуаций, поэтому эта команда имеет 7 параметров, которые управляют каждым атрибутом кривой. Следующее объясняет значение численного значения:

RX, Ry-это длина полумажной оси и полу-короткой оси дуги

Ось оси X-это угол между осью X и горизонтальным направлением, где расположена эта дуга, то есть угол вращения против часовой стрелки оси X, а отрицательное число представляет собой угол вращения по часовой стрелке.

Большой флаг составляет 1, чтобы представлять большую угловую дугу и 0, чтобы представлять небольшую угловую дугу.

Защитный флаг составляет 1, который представляет дугу от начальной точки до конечной точки по часовой стрелке вокруг центра, а 0 представляет направление против часовой стрелки.

x, y - координаты терминала дуги.

Я не буду говорить о первых двух параметрах и двух последних параметрах, это очень просто; Давайте поговорим о трех параметрах в середине:

Ротация оси X представляет собой угол вращения и испытывает различия в дугах в следующем примере:

<svg>

<Путь D = "M10 315

L 110 215

A 30 50 0 0 1 162,55 162,45

L 172,55 152,45

A 30 50 -45 0 1 215.1 109,9

L 315 10 "rosck =" черный "fill =" green "withidth =" 2 "fill-opacty =" 0,5 "/>

</svg>

HTML выше рисует следующий рисунок:

Из рисунка мы видим, что различные параметры вращения эллипса приводят к разным направлениям нарисованной дуги. Конечно, этот параметр не влияет на идеальный круг.

Большой флаг и флаг-флаг контролируют размер и направление дуги и испытайте различия в дуге в следующем примере:

<svg>

<Путь D = "M80 80

A 45 45, 0, 0, 0, 125 125

L 125 80 Z "fill =" green "/>

<Путь D = "M230 80

A 45 45, 0, 1, 0, 275 125

L 275 80 Z "fill =" red "/>

<Путь D = "M80 230

A 45 45, 0, 0, 1, 125 275

L 125 230 Z "Fill =" Purple "/>

<Путь D = "M230 230

A 45 45, 0, 1, 1, 275 275

L 275 230 Z "Fill =" Blue "/>

</svg>

Этот HTML рисует следующие картинки:

Из вышесказанного мы видим, что эти параметры на самом деле являются единственными параметрами, необходимыми для определения раздела дуги. Здесь также видно, что дуги в SVG более сложны, чем в холсте.

Рисование кубическая кривая Безера

В кривой кубической кривой есть две контрольные точки, а именно (x1, y1) и (x2, y2), а последний (x, y) представляет конечную точку кривой. Испытайте следующие примеры:

<svg>

<Путь D = "M10 10 C 20 20, 40 20, 50 10" rosck = "черный" fill = "прозрачный"/>

<Путь D = "M70 10 C 70 20, 120 20, 120 10" rosck = "черный" fill = "прозрачный"/>

<Путь D = "M130 10 C 120 20, 180 20, 170 10" rosck = "черный" fill = "прозрачный"/>

<Путь D = "M10 60 C 20 80, 40 80, 50 60" rock = "черный" fill = "прозрачный"/>

<Путь D = "M70 60 C 70 80, 110 80, 110 60" rock = "черный" fill = "прозрачный"/>

<Путь D = "M130 60 C 120 80, 180 80, 170 60" rock = "черный" fill = "прозрачный"/>

<Путь D = "M10 110 C 20 140, 40 140, 50 110" rosck = "черный" fill = "прозрачный"/>

</svg>

Этот фрагмент HTML рисует следующий рисунок:

Из вышесказанного мы видим, что контрольная точка управляет радианом кривой.

Специальная версия Cubic Bezier Curve: SX2 Y2, XY

Много раз, чтобы нарисовать гладкую кривую, необходимо нарисовать кривую непрерывно несколько раз. В это время, чтобы сгладить переход, контрольная точка второй кривой часто является точкой отображения первой контрольной точки кривой на другой стороне кривой. Эта упрощенная версия может быть использована в настоящее время. Здесь следует отметить, что, если перед инструкцией S нет других инструкций или инструкций C, то две контрольные точки будут считаться одинаковыми и дегенерировать в квадратичную кривую Безье; Если инструкция S используется после другой инструкции S или инструкции C, первая контрольная точка последующей инструкции S будет установлен по умолчанию с точкой сопоставления второй контрольной точки предыдущей кривой. Давайте испытаем это:

<svg>

<Путь D = "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" ход = "черный" fill = "прозрачный"/>

</svg>

Этот фрагмент HTML приведен следующим образом:

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

Квадратная квадратная кривая

Квадратичная кривая Безье имеет только одну контрольную точку (x1, Y1), которая обычно показана на рисунке ниже:

Если вы непрерывно рисуете кривую, вы также можете использовать упрощенную версию T. Аналогично, когда t находится только перед командами Q или T, контрольная точка последующей T -команды будет установлена на точку сопоставления контрольной точки предыдущей кривой по умолчанию. Давайте испытаем это:

<svg>

</svg>

Этот фрагмент HTML приведен следующим образом:

Точно так же, если команде T не предшествует команде Q или T, считается, что нет управляющей точки, а линия нарисованной - прямая линия.

Относительная инструкция по рисованию координат

Буквы абсолютной инструкции по рисованию координат одинаковы, за исключением того, что все они являются строчными. Параметры, связанные с координатами в параметрах этого набора инструкций, представляют относительные координаты, что означает, что параметры представляют собой смещение от текущей точки в целевую точку, положительное число представляет собой положительное смещение оси, а отрицательное число представляет собой обратный смещение. Однако для инструкций Z нет никакой разницы в случае.

Здесь следует отметить, что абсолютные инструкции по координат и относительные инструкции по координату могут использоваться в смешанной форме . Иногда смешанное использование может привести к более гибким методам рисования.

Примечания о рисунке пути SVG:

При рисовании фигуры с отверстиями вы должны обратить внимание на: рисунок внешних краев должен быть против часовой стрелки, а порядок краев отверстий внутри должен быть по часовой стрелке. Только графический эффект заполнения, нарисованный таким образом, будет правильным.

Практическая ссылка:

Индекс скрипта: 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/