Пошаговое закрашивание SVG элемента
Снова Здраствуйте, у меня есть SVG элемент и 4 блока, при наведении на которые, полоса должна закрашиваться в зависимости от наведения на определенный шаг: 
Вот так:
Вот сам код SVG элемента, он подключен на страничку через <use xlink:href="#steps-line"/>
Код ниже лежит в отдельном файле.
<symbol id="steps-line" viewBox="0 0 922 333">
<svg width="922" height="333" viewBox="0 0 922 333" xmlns="http://www.w3.org/2000/svg">
<path d="M318.5 4C318.5 2.067 320.067 0.5 322 0.5H852.5C890.608 0.5 921.5 31.3924 921.5 69.5C921.5 107.608 890.608 138.5 852.5 138.5L101 138.5C49.3614 138.5 7.50001 180.361 7.5 232C7.49999 283.639 49.3614 325.5 101 325.5L698 325.5C699.933 325.5 701.5 327.067 701.5 329C701.5 330.933 699.933 332.5 698 332.5L101 332.5C45.4954 332.5 0.499994 287.505 0.5 232C0.500006 176.495 45.4954 131.5 101 131.5L852.5 131.5C886.742 131.5 914.5 103.742 914.5 69.5C914.5 35.2584 886.742 7.5 852.5 7.5H322C320.067 7.5 318.5 5.933 318.5 4Z" fill="#E5ECF3" s stroke="black" stroke-linecap="round">
</path>
</svg>
</symbol>
Нужно реализовать плавную анимацию этого элемента, помогите(( PS: В прошлый раз так и не получилось сделать это, ребята тут пытались подсказывать...
Ответы (2 шт):
Тег <symbol> применяется для хранения в одном svg файле нескольких отдельных, например иконок, каждая из которых окружена тегом <symbol id="car"> и вызывается из этого файла по своему уникальному id.
Тег <symbol> скрывает содержание команд svg (path) внутри себя. Это сделано для того чтобы все иконки не накрывали друг друга в одном месте.
Но если у вас всего один объект, то <symbol> не нужен.
- Необходимо перенести все правила CSS внутрь svg и сохранить его в виде отдельного файла в формате *.svg
- Разместить файл на сервер
- Добавить файл svg в HTML с помощью
<object>
Другие способы добавления SVG в HTML
Пример взял из предыдущего ответа и перенес CSS внутрь SVG
Анимация заполнения начнется после наведения на пункты меню
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1000 500">
<style>
.rect:hover {
fill:lime;
fill-opacity:0.3;
cursor: pointer;
-webkit-filter: drop-shadow(4px 8px 3px rgba(0, 0, 0, 1));
filter: drop-shadow(4px 8px 3px rgba(0, 0, 0, 1));
}
</style>
<image xlink:href="https://i.stack.imgur.com/vGRBR.png" id="image2" height="100%" width="100%"/>
<path id="trace" stroke-dasharray="1651" stroke-dashoffset="1651" d="M321 190h369c50 0 53 90 0 90H163c-82 0-83 133-1 133h419" fill="none" stroke="#2D4461" stroke-width="6" stroke-linecap="round" >
<animate id="an1" attributeName="stroke-dashoffset" begin="rect1.mouseover" dur="1.5s" values="1651;1450" fill="freeze" restart="whenNotactive" />
<animate id="an2" attributeName="stroke-dashoffset" begin="rect2.mouseover" dur="2s" values="1450;1200" fill="freeze" restart="whenNotactive" />
<animate id="an3" attributeName="stroke-dashoffset" begin="rect3.mouseover" dur="3s" values="1200;350" fill="freeze" restart="whenNotactive" />
<animate id="an4" attributeName="stroke-dashoffset" begin="rect4.mouseover" dur="2s" values="350;0" fill="freeze" restart="whenNotactive" />
</path>
<g fill="transparent">
<path class="rect" id="rect1" d="M64 65h245l3 152-247-2z" />
<path class="rect" id="rect2" d="m664 97 290 1v148l-290-1z" />
<path class="rect" id="rect3" d="M140 289h252l1 116-252-2z" />
<path class="rect" id="rect4" d="M597 337h232l-1 125-231 3z" />
</g>
</svg>Теперь, когда готовый файл расположен на сервере, достаточно вызвать его
<object type="image/svg+xml" data="https://svg-art.ru/files/animation/carSale.svg"> </object>возможно ли под эту полосу подставить еще одну, тоже svg элементом, но без анимации?
Для этого надо добавить ещё один path в коде path id="path1" светло-синея линия
Так как не указаны stroke-dasharray, stroke-dashoffset то линия будет всегда полностью видна.
Если нужно удалить картинку - фон, то просто закомментируйте строку
<image xlink:href="https://i.stack.imgur.com/vGRBR.png" id="image2" height="100%" width="100%"/>
Остальное всё также, как в первом примере
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1000 500">
<style>
.rect:hover {
fill:lime;
fill-opacity:0.3;
cursor: pointer;
-webkit-filter: drop-shadow(4px 8px 3px rgba(0, 0, 0, 1));
filter: drop-shadow(4px 8px 3px rgba(0, 0, 0, 1));
}
</style>
<image xlink:href="https://i.stack.imgur.com/vGRBR.png" id="image2" height="100%" width="100%"/>
<!-- Трасса неподвижная (светло-синия) -->
<path id="path1" d="M321 190h369c50 0 53 90 0 90H163c-82 0-83 133-1 133h419" fill="none" stroke="#AFD7FF" stroke-width="6" stroke-linecap="round" />
<!-- Заполнение трассы при наведении-->
<path id="path2" stroke-dasharray="1651" stroke-dashoffset="1651" d="M321 190h369c50 0 53 90 0 90H163c-82 0-83 133-1 133h419" fill="none" stroke="#2D4461" stroke-width="6" stroke-linecap="round" >
<animate id="an1" attributeName="stroke-dashoffset" begin="rect1.mouseover" dur="1.5s" values="1651;1450" fill="freeze" restart="whenNotactive" />
<animate id="an2" attributeName="stroke-dashoffset" begin="rect2.mouseover" dur="2s" values="1450;1200" fill="freeze" restart="whenNotactive" />
<animate id="an3" attributeName="stroke-dashoffset" begin="rect3.mouseover" dur="3s" values="1200;350" fill="freeze" restart="whenNotactive" />
<animate id="an4" attributeName="stroke-dashoffset" begin="rect4.mouseover" dur="2s" values="350;0" fill="freeze" restart="whenNotactive" />
</path>
<g fill="transparent">
<path class="rect" id="rect1" d="M64 65h245l3 152-247-2z" />
<path class="rect" id="rect2" d="m664 97 290 1v148l-290-1z" />
<path class="rect" id="rect3" d="M140 289h252l1 116-252-2z" />
<path class="rect" id="rect4" d="M597 337h232l-1 125-231 3z" />
</g>
</svg>update
Предвидя следующие вопросы, добавлю вариант без картинки.
Наверняка, вы при вёрстке хотите сделать свой вариант бизнес-процесса без фоновой картинки, с версткой блоков для наведения
Поэтому на примере ниже, я добавил обозначения расположения этих блоков.
Размеры этих зон смотрите в инспекторе, либо получите с помощью метода JS getBBox()
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1000 500">
<style>
.rect:hover {
fill:lime;
fill-opacity:0.3;
cursor: pointer;
-webkit-filter: drop-shadow(4px 8px 3px rgba(0, 0, 0, 1));
filter: drop-shadow(4px 8px 3px rgba(0, 0, 0, 1));
}
</style>
<!-- <image xlink:href="https://i.stack.imgur.com/vGRBR.png" id="image2" height="100%" width="100%"/> -->
<!-- светло-синие квадраты -->
<g fill="#E1F0FF">
<path class="rect" id="rect1" d="M64 65h245l3 152-247-2z" />
<path class="rect" id="rect2" d="m664 97 290 1v148l-290-1z" />
<path class="rect" id="rect3" d="M140 289h252l1 116-252-2z" />
<path class="rect" id="rect4" d="M597 337h232l-1 125-231 3z" />
</g>
<!-- Трасса неподвижная (светло-синия) -->
<path id="path1" d="M321 190h369c50 0 53 90 0 90H163c-82 0-83 133-1 133h419" fill="none" stroke="#AFD7FF" stroke-width="6" stroke-linecap="round" />
<!-- Заполнение трассы при наведении-->
<path id="path2" stroke-dasharray="1651" stroke-dashoffset="1651" d="M321 190h369c50 0 53 90 0 90H163c-82 0-83 133-1 133h419" fill="none" stroke="#2D4461" stroke-width="6" stroke-linecap="round" >
<animate id="an1" attributeName="stroke-dashoffset" begin="rect1.mouseover" dur="1.5s" values="1651;1450" fill="freeze" restart="whenNotactive" />
<animate id="an2" attributeName="stroke-dashoffset" begin="rect2.mouseover" dur="2s" values="1450;1200" fill="freeze" restart="whenNotactive" />
<animate id="an3" attributeName="stroke-dashoffset" begin="rect3.mouseover" dur="3s" values="1200;350" fill="freeze" restart="whenNotactive" />
<animate id="an4" attributeName="stroke-dashoffset" begin="rect4.mouseover" dur="2s" values="350;0" fill="freeze" restart="whenNotactive" />
</path>
</svg>
<script>
console.log(rect1.getBBox())
</script>