Примеры анимации маркеров | Описание и примеры стандартных функций SVG

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

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

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

viewBox="0 0 250 250" preserveAspectRatio="none"

xmlns="http://www.w3.org/2000/svg" >

<title>example animation marker</title>

<desc>animation attributes marker http://svg-art.ru </desc>

<defs>

<pattern id="newpattern"

x="0" y="0" width="20" height="20"

patternUnits="userSpaceOnUse" >

</g>

</pattern>

<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="10"

markerUnits="strokeWidth" orient="auto"

markerWidth="20" markerHeight="20">

</marker>

<marker id="MarkerCircle" viewBox="0 0 10 10" refX="0" refY="5"

markerUnits="userSpaceOnUse"

markerWidth="10" markerHeight="10">

</marker>

</defs>

<rect x="0" y="0" width="100%" height="100%"

style="stroke: #000000; fill: url(#newpattern);" />

<text x="27px" y="225px" font-size="18" font-weight="bold" font-family="serif" fill="lightyellow">Start</text>

</g>

<animate attributeName="stroke-width"

begin="startButton.click" from="1px" to="6px" dur="6s"

repeatCount="2" fill="freeze"

</line>

<text x="25" y="25">markerUnits="strokeWidth"</text>

</g>

</svg>

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.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

viewBox="0 0 150 150" preserveAspectRatio="none"

xmlns="http://www.w3.org/2000/svg" >

<title>marker attribute "orient"</title>

<desc>Animation marker attribute "orient" http://svg-art.ru </desc>

<defs>

<pattern id="newpattern"

x="0" y="0" width="20" height="20"

patternUnits="userSpaceOnUse" >

</g>

</pattern>

<marker id="MarkerArrowRight" viewBox="0 0 20 20" refX="2" refY="10"

markerUnits="userSpaceOnUse" orient="0"

markerWidth="20" markerHeight="20">

<animate id="animRight" attributeName="orient" from="0" to="180"

begin="startButton.click" dur="5s" repeatCount="1" fill="freeze" />

</marker>

<marker id="MarkerArrowLeft" viewBox="0 0 20 20" refX="2" refY="10"

markerUnits="userSpaceOnUse" orient="0"

markerWidth="20" markerHeight="20">

<animate id="animLeft" attributeName="orient" from="0" to="180"

begin="startButton.click" dur="5s" repeatCount="1" fill="freeze" />

</marker>

</defs>

<rect x="0" y="0" width="100%" height="100%"

style="stroke: #000000; fill: url(#newpattern);" />

<text x="57px" y="135px" font-size="18" font-weight="bold" font-family="serif" fill="lightyellow">Start</text>

</g>

<line x1="20" y1="80" x2="120" y2="80"

style=" marker-start: url(#MarkerArrowLeft); marker-end: url(#MarkerArrowRight);

fill:none; stroke:green; stroke-width:2;">

</line>

</svg>

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

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

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

viewBox="0 0 150 150" preserveAspectRatio="none"

xmlns="http://www.w3.org/2000/svg" >

<title>combined animation marker</title>

<desc> combined animation marker: move along the line and turn http://svg-art.ru </desc>

<defs>

<pattern id="newpattern"

x="0" y="0" width="20" height="20"

patternUnits="userSpaceOnUse" >

</g>

</pattern>

<marker id="MarkerArrow" viewBox="0 0 20 20" refX="0" refY="10"

markerUnits="userSpaceOnUse" orient="auto"

markerWidth="20" markerHeight="20">

<animate id="refX1" attributeName ="refX" from ="0px" to="100px"

begin="startButton.click" dur = "5s" repeatCount="1" restart="whenNotActive" />

<animate id="orientX" attributeName ="orient" from ="0" to="180"

begin= "refX1.end" dur = "5s" repeatCount="1" fill="freeze" restart="whenNotActive" />

</marker>

<marker id="MarkerCircle" viewBox="0 0 10 10" refX="0" refY="5"

markerUnits="userSpaceOnUse"

markerWidth="10" markerHeight="10">

<animate id="refX2" attributeName = "refX" from ="0px" to ="-90px"

begin="startButton.click" dur="5s" repeatCount="1" fill="freeze" restart="whenNotActive" />

</marker>

</defs>

<rect x="0" y="0" width="100%" height="100%"

style="stroke: #000000; fill: url(#newpattern);" />

<text x="57px" y="135px" font-size="18" font-weight="bold" font-family="serif" fill="lightyellow">Start</text>

</g>

<line x1="20" y1="80" x2="110" y2="80"

style=" marker-start: url(#MarkerCircle); marker-end: url(#MarkerArrow);

fill:none; stroke:green; stroke-width:2; "/>

</svg>

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

viewBox="0 0 255 250" preserveAspectRatio="none"

xmlns="http://www.w3.org/2000/svg" >

<title>animation marker</title>

<desc> the animation of the four markers http://svg-art.ru </desc>

<defs>

#man:hover {

stroke:green;

opacity: 0.5;

}

#woman:hover{

fill:red;

opacity: 0.5;

}

]]> </style>

<pattern id="newpattern"

x="0" y="0" width="20" height="20"

patternUnits="userSpaceOnUse" >

</g>

</pattern>

<marker id="end-circle" markerUnits="userSpaceOnUse"

markerWidth="40" markerHeight="40" refX="10" refY="2" orient="auto">

<rect x="0" y="0" width="40" height="20"

stroke="black" fill="grey" fill-opacity="0.5"/>

<circle cx="10" cy="10" r="10"

style="fill:lime; stroke-width:2px; stroke:tomato;" />

</marker>

</defs>

<rect x="0" y="0" width="100%" height="100%"

style="stroke: #000000; fill: url(#newpattern);" />

<path d="M80,250 L80,100 L120,20 160,100 160,250

M80,100 L160,100"

fill="silver" stroke="black" />

</g>

<desc>the animation of the four markers </desc>

<animateTransform attributeType="xml"

attributeName="transform"

type="rotate"

from="0 120 120"

to="360 120 120"

begin="man.mouseover"

end="woman.mouseover"

dur="2.5s"

repeatCount="indefinite" fill="freeze"/>

</g>

</g>

</g>

<text x="225" y="155" transform="rotate(-90 225,155)" >Start </text>

</g>

</svg>

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

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

admin 12 декабря 2014 в 19:02 пишет:

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

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

Для отправки комментария вам необходимо авторизоваться.