<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Что такое SVG? Пишем текст.

Что такое SVG? Пишем текст.

В SVG помимо отрисовки каких-то фигур мы, также, можем писать текст. Вот о том, как писать текст на SVG, мы и поговорим в этой статье.

Чтобы написать текст в SVG, достаточно использовать тег text.

<svg>
  <text x="100" y="70">Какой-то текст</text>
</svg>

Атрибуты x и y задают начальную точку, от которой пойдёт текст.

Текст можно стилизовать с помощью css. Как это делать было рассмотрено в предыдущей статье.

<svg>
  <text x="10" y="10" style="font-weight: bold;">Какой-то жирный текст</text>
  <text x="10" y="30" style="font-style: italic;">Какой-то курсивный текст</text>
  <text x="10" y="50" style="text-decoration: underline;">Какой-то подчёркнутый текст</text>
</svg>

Если мы хотим, чтобы в html у какого-то участка текста были свои стили, то оборачиваем его в тег span. В SVG такое тоже возможно, но тег называется tspan.

<svg>
  <text x="10" y="10"><tspan style="text-decoration: underline;">Подчёркнутое</tspan> слово</text>
</svg>

Чтобы поменять направление текста, пропишем стиль writing-mode.

<svg>   <text x="10" y="10" style="writing-mode: tb;">Текст справа на лево</text> </svg>

Но работает это только в Internet Explorer.

В SVG мы можем обвести текст с помощью stroke для создания знаменитого эффекта.

<svg>
  <text x="10" y="100" font-weight="bold" fill="rgba(200,200,200,.1)" stroke="#ccc" stroke-width="0.5" font-size="70px">Текст</text>
</svg>

Теперь рассмотрим, как задавать градиенты в SVG.

<svg>
<defs>
  <linearGradient id="grad">
   <stop style="stop-color: #fff" offset="0%">
   <stop style="stop-color: #000" offset="100%">
  </linearGradient>
</defs>
<text x="10" y="10" font-size="70" font-weight="bold" fill="url(#grad)">Какой-то текст</text>
</svg>

Чтобы создать градиент, нужно использовать тег linearGradient внутри тега defs. В стилях мы задаём цвет, а в offset указываем откуда и куда идти градиенту. В нашем случае слева направо, от самого начала до самого конца текста. Затем, чтобы привязать созданный нами градиент, мы в свойстве fill пишем url(), а внутри id, который указали в теге linearGradient. С помощью атрибутов x1, x2, y1 и y2 можно указывать направление текста.

<defs>
  <linearGradient id="grad" x1="0" y1="0" x2="3" y2="3">
   <stop style="stop-color: #fff" offset="0%">
   <stop style="stop-color: #000" offset="100%">
  </linearGradient>
</defs>

Если вам нужен радиальный градиент, то используйте тег radialGradient.

<radialGradient id="grad">
  <stop style="stop-color: #fff" offset="0%">
  <stop style="stop-color: #000" offset="100%">
</radialGradient>

И в заключении рассмотрим, как поменять траекторию текста в SVG.

<svg>
<defs>
  <path id="curveLine" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>
<text x="10" y="100">
  <textPath xlink:href="#curveLine">
   Какой-то очень длинный текстище!!!
  </textPath>
</text>
</svg>

В теге path, в атрибуте d, мы указываем координаты кривой Безье. Также, не забываем указать id, который затем привязываем к нашему тексту в теге textPath.

Итак, на этом всё. Сегодня вы узнали, как использовать текст в SVG.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Maks4ever Maks4ever 27.12.2014 16:42:08

как с помощью кривой безье сделать вертикальный текст, и будет ли он поддерживать в браузерах

Ответить

Иван Кульков Иван Кульков 26.03.2015 16:13:40

Здравствуйте, Михаил. Огромное спасибо за этот ресурс! Изучаю основы HTML и дошёл до статьи "Что такое SVG? Пишем текст". При попытке прописать цвет текста (и не только) в виде кода (например:#0000-черный) ничего не получается, а если прописать "black" то отображается. Пробовал на разных браузерах-результат тот же. Спасибо!

Ответить

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