<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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" то отображается. Пробовал на разных браузерах-результат тот же. Спасибо!

Ответить

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