2

У меня есть кривая в SVG и необходимо заполнить её вдоль пути при наведении, может кто-нибудь помочь?
Анимация для заливки должна быть другого цвета или может быть одинаковой с патчем.
Я попытался использовать тег animate, но он неэффективен и заполняет не всё.
Мой путь SVG приведен ниже. Мне нужен этот путь для анимации заполнения с помощью dashoffset.

<svg width="210mm" height="45mm" viewBox="0 0 744.09449 159.44881">
    <path style="opacity:1;fill:#ded9d5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1"
          d="m 18.929688,529.44141 c 1.140051,2.17164 1.739409,4.60197 1.74414,7.07226 -0.0033,2.41521 -0.575072,4.79339 -1.666016,6.92969 l 36.876954,0 c 17.101683,0 11.124297,14.78094 13.525192,34.92207 7.304679,27.32129 35.935342,38.13518 62.612922,41.73111 -1.5457,-2.42739 -4.33484,-7.94712 -4.33733,-10.8524 0.005,-3.11453 0.90166,-5.74434 2.66254,-8.27277 -23.30774,-1.1068 -29.8766,-7.34118 -39.33413,-22.29658 -4.829034,-11.35821 5.68082,-49.23338 -28.703413,-49.23338 z" transform="translate(0.5714286,1.42857)" id="path4471" />
</svg>  

Перевод вопроса: Need To fill Svg Animation for a curve @Ram

1

1 ответ 1

4

Ваш код патча SVG выходит за рамки пользовательской области просмотра viewport, поэтому не видно кривой. С помощью svg-editor Peter Collingridge проведена оптимизация кода

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="420" height="180" viewBox="-50 540 372 80.4" >
<path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"  style=" stroke:#ded9d5; stroke-width:1; fill:#ded9d5; />  
</svg> 

Ваш код отрисовывает замкнутый путь, поэтому анимация с помощью атрибута
stroke-dashoffset будет рисовать кривую по замкнутому пути.
Начало анимации - при наведении курсора на фигуру.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="420" height="180" viewBox="-50 540 372 80.4" >
  
  <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"  
  style=" stroke:#4B0082; stroke-width:3; fill:#ded9d5; stroke-dasharray:571; stroke-dashoffset:571;">
  <animate id="dash" attributeName="stroke-dashoffset" values="571;0;571" begin="path1.mouseover" restart="whenNotActive" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
</svg> 

begin="path1.mouseover" - команда на запуск анимации, где path1идентификатор пути

restart="whenNotActive" - для предотвращения запуска повторной анимации

values="571;0;571" - анимация на длине пути от 571px до нуля и обратно

Если я правильно понял автора вопроса нужна анимация не строки пути, а заполнение цветом всей фигуры, образованной path.

При незамкнутом пути это было бы легко сделать - увеличить толщину строки до нужной величины и использовать анимацию stroke-dashoffset.
Для решения этих противоречий можно использовать такой прием:
открыть наш код в векторном редакторе и нарисовать дополнительную кривую, которая идет посередине фигуры.
введите сюда описание изображения

И эту линию будем анимаровать. Для запуска анимации наведите курсор.

<svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="420" height="180" viewBox="-50 550 372 80.4"  version="1.1">
    
  <path d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"  
  style="fill:#F8F3EF;stroke-width:1; stroke:none;" />
  
    
  <path style="stroke-dasharray:152;stroke-dashoffset:152; fill:none;stroke-width:2;stroke:yellowgreen;"
  d="m20.8 535.9c24.9 2.5 55.9-6.4 57.2 15.4 3.5 19.3-1.6 31.7 14 45.2 21.1 17.5 35.4 13 35.4 13">
  <animate id="dash" attributeName="stroke-dashoffset" values="152;0" begin="svg2.mouseover" restart="whenNotActive" dur="3s"    fill="freeze" repeatCount="1">
  </animate>

	</path>
</svg>

Далее увеличиваем толщину линии - stroke-width:20; и получаем необходимый результат:

<svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="420" height="180" viewBox="-50 550 372 80.4"  version="1.1">
    
  <path d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"  
  style="fill:#F8F3EF;stroke-width:1; stroke:none;" />
  
    
  <path style="stroke-dasharray:152;stroke-dashoffset:152; fill:none;stroke-width:20;stroke:yellowgreen;"
  d="m20.8 535.9c24.9 2.5 55.9-6.4 57.2 15.4 3.5 19.3-1.6 31.7 14 45.2 21.1 17.5 35.4 13 35.4 13">
  <animate id="dash" attributeName="stroke-dashoffset" values="152;0" begin="svg2.mouseover" restart="whenNotActive" dur="3s"    fill="freeze" repeatCount="1">
  </animate>

	</path>
</svg>

Решение с использованием filter

Идея решения инициирована - SVG Filter tag on hover @Holger Will

Анимация заполнения пути достигается изменением атрибута фильтра dx - смещение по оси Х-ов.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="420" height="180" viewBox="-50 540 372 80.4">
   <defs>
    <filter id="violet-fill" x="0%" y="0%">
      <feFlood flood-color="#F8F3EF" />
      <feOffset dx="0">
        <animate id="anim" attributeName="dx" values="0;115;0" dur="5s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/> 
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  </defs>
  <style>
  path {
  filter: url(#violet-fill);
}
  </style>
  <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"  
  style=" stroke:#4B0082; fill:#F8F3EF;"/>
</svg>

Второй вариант решения с помощью анимации filter

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="420" height="180" viewBox="-50 540 372 80.4">
   <defs>
    <filter id="violet-fill" x="0%" y="0%">
      <feFlood flood-color="#ded9d5" />
      <feOffset dx="0">
        <animate id="anim" attributeName="dx" values="0;115;0" dur="5s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/> 
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  </defs>
  <style>
  path {
  filter: url(#violet-fill);
}
  </style>
  <path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"  
  style=" stroke-width:1; stroke:violet;   fill:#4B0082;"/>
</svg>  

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.