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>  

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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