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

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

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

Примеры анимации маркеров

1.В первом примере показывается влияние атрибута markerUnits на габаритные размеры самого маркера в зависимости от толщины (stroke-width) линии, к которой он присоединен. Если атрибут маркера установлен в значение: markerUnits=”strokeWidth”, то при увеличении толщины линии пропорционально увеличиваются габаритные размеры маркера.

Обратите внимание, что у второго маркера, который выполнен в виде красного круга, габаритные размеры не увеличиваются, так как для него установлено значение атрибута markerUnits=”userSpaceOnUse” (см. строку 28) в листинге ниже. Важно помнить об этом, так как значение markerUnits по умолчанию равно “strokeWidth”.
Продолжить чтение