<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

Подпишитесь на мой канал на 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):

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