Создание стрелок в SVG

Учитывая, что одной из распространенных целей SVG является создание диаграмм и иллюстраций, вполне логично, что завершение линий и путей стрелками — очень распространенный запрос. Хотя можно украсить линию собственной индивидуальной формой стрелки, закодированной вручную, гораздо эффективнее создать шаблон стрелки с помощью элемента <marker>.

Продолжить чтение

Создание водяных знаков страницы с помощью SVG

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

В этой статье показано, как создавать водяные знаки на страницах: в частности, текст (или логотипы) по диагонали.
Текстовые знаки SVG

Ранее я уже решал проблему представления нескольких диагональных текстовых элементов на фоне страницы. В моем предыдущем решении использовались изображения PNG, но гораздо эффективнее создать SVG с элементом <pattern>
Продолжить чтение

Временная шкала и анимация по ключевым кадрам с помощью Anime.js

В этой статье мы изучим основы Anime.js и узнаем, как создавать анимацию с ключевыми кадрами (keyframe) и временными шкалами (timeline). Anime.js – это очень легкий движок анимации JavaScript, поддерживающий все современные браузеры. Для создания очень красивой анимации требуется всего пара строк JavaScript. Давайте посмотрим на пример и изучим основы Anime.js.

Анимация отдельного свойства

Продолжить чтение

Линейный прогресс бар SVG

Линейный прогресс бар SVG можно реализовать с помощью изменения или:
1 stroke-dashoffset
от нуля до максимального значения равного полной длине линии.
Этот способ подробно описан в статье: Анимация рисования линии

2. stroke-dasharray
при этом способе в начальной точке роста линии прогресс бара значение
dash – длина черты, равно нулю, а gap – длина пробела максимальна.
stroke-dasharray:0,628;

Продолжить чтение

Элемент foreignObject

Элемент foreignObject служит для вставки кода HTML внутри SVG.
Известно, что внутри SVG автоматического переноса строки, как в HTML не существует.
Это очень неудобно использовать для переноса строки в SVG теги < tspan >
Поэтому, используя foreignObject можно получить автоматический перенос строки внутри SVG
Для начала задаем регион действия. Это прямоугольник с указанными координатами. < foreignObject x=”100″ y=”180″ width=”1080″ height=”800″>
Изменяя их можно точно разместить текст, допустим внутри красивой рамки SVG.

1. Структура файла SVG с встроенным foreignObject

Получился текст с автоматическим переносом строк в внутри рамки SVG Если высота текста превышает высоту рамки, то появится
полоса прокрутки

Ниже полный пример кода:

2. Ещё пример художественной рамки SVG и текста внутри foreignObject

⇚Как добавить SVG в HTML5 страницу Эти странные тэги SVG ⇛

Необычные эффекты stroke-dasharray

  1. Заполнение строки svg элемента окружностями
  2. Заполнение строки одной, двумя, n окружностями
  3. Заполнение строки шестью окружностями
  4. Анимация спирали со строкой, состоящих из кружков
  5. Анимация изменения формы рамки
  6. Создаем облака с помощью двух строк stroke-linecap/a>
  7. Создаем анимацию краев облака

При совместном использование атрибутов stroke-dasharray и stroke-linecap=”round”, можно получить интересные эффекты визуализации.
У stroke-dasharray. два параметра – stroke-dasharray=”черта, пробел”

1. Заполнение строки svg элемента окружностями

для этого необходимо:

  • длину черты установить равную нулю – stroke-dasharray=”0, пробел”
  • а пробел установить равным ширине строки stroke-width

Итого:
stroke-dasharray=”0, 35″ stroke-width=”35″

при таких значениях параметров, строка элемента будет заполнена окружностями

Продолжить чтение