<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Варианты использования SVG на сайтах. Часть #2

Варианты использования SVG на сайтах. Часть #2

Создание SVG круга

Окружность рисуется при помощи SVG элемента circle. Атрибуты cx и cy указывают на X и Y координаты центра круга. Атрибут r равен радиусу круга.

<svg class="border" width="250" height="200" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
    <circle class="circle" cx='120' cy='100' r='80'/>
</svg>

.circle {
    fill: pink; /* цвет заливки круга */
    stroke: gray; /* цвет обводки круга */
    stroke-width: 6; /* ширина обводки круга */
}


Варианты использования SVG на сайтах.

Создание SVG эллипса

Эллипс создается с помощью SVG элемента ellipse. В отличии от круга, у эллипса есть два радиуса, по оси X и по оси Y.

<svg class="border" width="250" height="200" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
    <ellipse class="ellipse" cx='120' cy='100' rx='100' ry='50'/>
</svg>

.ellipse {
    fill: pink; /* цвет заливки эллипса */
    stroke: gray; /* цвет обводки эллипса */
    stroke-width: 6; /* ширина контура эллипса */
}


Варианты использования SVG на сайтах.

Построение SVG прямой линии

Элемент line создает прямую линию.

  • Атрибут x1 задает координату X начальной точки линии
  • Атрибут y1 задает координату Y начальной точки линии
  • Атрибут x2 задает координату X конечной точки линии
  • Атрибут y2 задает координату Y конечной точки линии
<svg class="border" width="250" height="200" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
    <line class="line" x1='10' y1='10' x2='150' y2='150'/>
</svg>

.line {
    stroke: gray; /* цвет прямой линии */
    stroke-width: 6; /* ширина прямой линии */
}


Варианты использования SVG на сайтах.

Построение SVG ломанной линии

Элемент polyline собирает по точкам из прямых линий разные графические фигуры не замкнутым контуром. Атрибут points задает координаты X и Y каждой точки перелома прямой линии. Координаты X,Y разделяются запятыми, а координаты точек - пробелами.

<svg class="border" width="250" height="200" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
    <polygon class="polygon" points="100,10 40,198 190,78 10,78 160,198"/>
</svg>

.polyline {
    fill:none; /* убираем заливку */
    stroke: gray; /* цвет прямой линии */
    stroke-width: 6; /* ширина прямой линии */
}


Варианты использования SVG на сайтах.

Построение SVG многоугольника

Элемент polygon образует по точкам из прямых линий многоугольник с замкнутым контуром, как минимум с тремя сторонами. Атрибут points задает координаты X и Y каждого угла многоугольника

<svg class="border" width="250" height="200" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
    <polygon class="polygon" points="100,10 40,198 190,78 10,78 160,198"/>
</svg>

.polygon {
    fill:pink;/* цвет заливки */
    stroke: gray; /* цвет прямой линии */
    stroke-width: 6; /* ширина прямой линии */
}


Варианты использования SVG на сайтах.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.