путь SVG
SVG путь - <путь>
<Путь> Элемент используется для определения пути.
Следующая команда может быть использована для маршрутизации данных:
- M = MoveTo
- L = LineTo
- H = горизонтальная LineTo
- V = вертикальная LineTo
- C = curveto
- S = гладкая curveto
- Q = квадратичная кривая Безье
- T = плавную квадратное Безье curveto
- A = эллиптическая дуга
- Z = closepath
Примечание: Все вышеуказанные команды позволяют строчных букв. Капитал представляет собой абсолютное позиционирование, относительное позиционирование указывает в нижнем регистре.
Пример 1
Приведенный выше пример определяет путь, который начинается в позиции 1500, достиг позиции 75200, а затем оттуда до 225 200 в 1500 году и, наконец, замкнутый путь.
Вот SVG код:
примеров
<Путь d = "M150 0 L75 200 L225 200 Z" />
</ SVG>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Пример 2
С помощью кривой Безье модель гладкая кривая, которая может быть расширена до бесконечности. При нормальных обстоятельствах, пользователь выбирает один или две конечные точки и две контрольные точки. Контрольная точка кривой Безье, который называется квадратичной кривой Безье и двух контрольных точек называются кубов.
В следующем примере создается квадратичная кривые Безье, А и С являются начальная и конечная точки, B контрольная точка:
Вот SVG код:
примеров
<Путь ID = d "lineAB" = "M 100 350 л 150 -300" ход = "красный"
Ход-ширина = "3" заполнить = "нет" />
<Путь ID = "lineBC" d = "M 250 50 л 150 300" ход = "красный"
Ход-ширина = "3" заполнить = "нет" />
<Путь d = "M 175 200 л 150 0" ход = "зеленый" штрих-ширина = "3"
заполнить = "нет" />
<Путь d = "M 100 350 кв 150 -300 300 0" ход = "синий"
Ход-ширина = "5" заполнить = "нет" />
<! - Все важные моменты ->
<G ход = "черный" ход-ширина = "3" заполнить = "черный">
<Круг ID = "точке А" сх = "100" су = "350" г = "3" />
<Круг ID = "pointB" сх = "250" су = "50" г = "3" />
<Круг ID = "pointC" сх = "400" су = "350" г = "3" />
</ G>
<! - Добавьте точки ->
<G размер шрифта = "30" шрифта = "засечек" заполнить = "черный" ход = "нет"
текст-якорь = "средний">
<Текст х = "100" у = "350" дх = "- 30"> A </ текст>
<Текст х = "250" у = "50" ау = "- 10"> В </ текст>
<Текст х = "400" у = "350" дх = "30"> C </ текст>
</ G>
</ SVG>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Сложно? Да! ! Потому что при рисовании сложность пути, настоятельно рекомендуется использовать редактор SVG для создания сложной графики.