SVG path часть 3

Примеры и код команд:

  1. Начальная точка (M,m) и отрезок прямой (L,l)
  2. Горизонтальная линия (H,h) и вертикальная (V,v)
  3. Дуга элипса – Elliptical Arc (A,a)
  4. Кубическая кривая Безье – The cubic Bézier curve
  5. Гладкая поликривая Безье – Smooth cubic poly Bezier curve
  6. Кривые Безье второго порядка – Quadratic Bezier Curves
  7. Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier
  8. Правила и команды заполнения путей – fill-rule=”nonzero | evenodd”

4. Кубическая кривая Безье – The cubic Bezier curve

cubic_Bezier_curve

  • M mx,my – координаты начальной точки кубической кривой Безье
  • x1,y1 – координаты первой контрольной точки
  • x2,y2 – координаты второй контрольной точки
  • x,y – координаты финальной точки кривой Безье

Примеры кубических кривых Безье.

Для того, чтобы убедиться, в универсальности этого инструмента по созданию разнообразных фигурных линий, проведем небольшой эксперимент. Начальные и конечные точки кривой Безье оставляем на месте, регулируем форму кривой только с помощью изменения координат контрольных точек: x1,y1 и x2,y2.

(Две пары координат, которые идут после команды – C)

The cubic Bezier curve combinations of control's pointsswap checkpointswap checkpointswap checkpoint-4

5. Гладкая поликривая Безье – Smooth cubic poly Bezier curve

Если необходимо нарисовать более сложные, многозвенные кривые Безье третьего порядка, то можно присоединять к первой кривой вторую.
В этом случае конечная точка первой кривой становится стартовой точкой для второй кривой Безье. На примере ниже координаты первой кривой указаны черным цветом, а две контрольные и конечная точка, присоединенной кривой красным цветом.
Smooth cubic poly Bezier curve
При взаимодействии контрольных точек двух соседних кривых Безье соединение может получиться не совсем гладким, под острым углом.
Для гарантированного, гладкого (smooth) соединения двух кривых Безье применяется командаS.
В этом случае в написании формулы параметра путиd=”…” отбрасывается не только начальная точка второй кривой, но и координаты первой контрольной точки. На рисунке эта виртуальная контрольная точка изображена красной прерывистой линией.
Другими словами, для присоединяемой кривой указываются координаты только двух точек: последней контрольной и финальной точки кривой.

При применении командыS первая контрольная точка, присоединяемой кривой, всегда является зеркальным отражением финальной контрольной точки первой кривой Безье.

⇚ SVG path часть 2 SVG path часть 4 ⇛

SVG path часть 3: 2 комментария

  1. Спасибо большое за ваш сайт и информацию на нем. Недавно начала заниматься анимацией в вебе и ваш сайт просто незаменим- пользуюсь им как шпаргалкой.
    Мы столкнулись с тем, что нам нужно нарисовать сомкнутую фигуру из двух кривых, но выпуклостью вниз. Возможно ли это?

  2. @Ireen_kante
    Конечно возможно.
    На сайте появился новый раздел – Онлайн генераторы SVG
    Выберите любой подходящий инструмент, подвигайте мышкой для получения нужной формы кривой и скопируйте код SVG.

Добавить комментарий