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

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

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

2. В этом примере для анимации используется атрибут маркера “orient”, отвечающий за поворот маркера относительно линии. К линии присоединены начальный маркер marker-start: url(#MarkerArrowLeft); и конечный marker-end: url(#MarkerArrowRight);

Значение параметра “orient” для обоих маркеров одновременно изменняется от 0 градусов до 180 в течение 5 секунд. См. строки листинга 23,24 и 31,32. По завершению поворота маркеров begin=”animLeft.end” и begin=”animRight.end” линия с маркерами перемещается вправо. См. строки листинга 47,48.

3.В этом примере используется комбинированная анимация: перемещение маркеров навстречу друг другу вдоль линии. При этом используется атрибут маркера “refX” и затем поворот обоих маркеров, в этом случае используется атрибут “orient”.

В листинге ниже строки отвечающие за эти действия выделены цветом: 25,26,35,36 – перемещение; 27,28 – поворот;

4. Анимацию 4-х маркеров я уже приводил в этой статье. Но там был только фрагмент кода, здесь привожу его полностью.

Напомню, что запускает анимацию наведение мышки на мужской силуэт и останавливает анимацию – женский силуэт.

Анимация линии часть 1 ⇛

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

  1. Примечание к 3 примеру.
    Анимация параметров маркера “refX”, “refY”, которые отвечают за коррекцию положения маркера относительно линии корректно работает только в Mozilla Firefox. В Opera, GoogleChrom, Yandex и Safari работает довольно странно: анимация refY не работает и подменяется значениями из refX.
    В статике во всех этих браузерах “refX” и “refY” работают нормально.
    Внедрение SVG в современных браузерах идёт поэтапно, поэтому надеюсь, что это будет работать везде нормально.

Добавить комментарий