Кароч, делаю интерактивную карту, бгшка и сверху svg-элементы, в частности - окружности и пунктирные линии, типа маршруты и поинты. По мере прокручивания выезжают с двух сторон картинка+текст в двух контейнерах, и в ЭТОТ момент прорисовываем маршрут и поинт соответствующий паре (картинка+текст),
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--Тут первый поинт-->
<circle cx="200" cy="150" r="18"
fill="white"
stroke-width="5"
stroke="green"
stroke-opacity="0.7">
</circle>
<circle cx="200" cy="150" r="11.0764"
stroke="white"
stroke-width="5"
fill="green"
fill-opacity="0.7">
<animate attributeType="XML"
attributeName="r"
from="13" to="10" dur="2s"
repeatCount="indefinite">
</animate>
</circle>
<!--Тут пунктирная линия между поинтами-->
<path d="M 219 150 h 257"
stroke="green"
stroke-opacity="0.7"
stroke-width="14"
stroke-dasharray="7 5">
</path>
<!--Тут второй поинт-->
<circle cx="495" cy="150" r="18"
fill="white"
stroke-width="5"
stroke="green"
stroke-opacity="0.7">
</circle>
<circle cx="495" cy="150" r="11.0764"
stroke="white"
stroke-width="5"
fill="green"
fill-opacity="0.7">
<animate attributeType="XML" attributeName="r"
from="13" to="10" dur="2s"
repeatCount="indefinite"></animate>
</circle>
</svg>
</body>
Вот типа как я ковыряю эту тему и прицеливаюсь, и сразу же подводные камни: 1) Есть настройки анимации окружности, там де она типа расширяется, но кошерно будет сделать что бы она расширялась, а затем сужалась и закольцевать, а то дёргается, беспонтово 2) Как заанимировать линию, чёт не нагуглил годной темы, и с ней ещё момент - как подогнать край под окружность, можно ли сделать вырезы (полукругом) на концах, что бы она чётко стыковалась с окружностью - ведь если я использую опасити, а я использую - края крайне херово просматриваются. В общем, буду рад вашим комментариям и наставлениям, вот, это всё
