Волнистый эффект для моей кривой svg Безье, возможно ли это?

ProgramBox

Волнистый эффект для моей кривой svg Безье, возможно ли это?

Post author:admin
Запись опубликована:7 апреля, 2023
Post category:Вопросы по программированию

#javascript #css #svg

Вопрос:

Я пытаюсь добавить волнистый эффект к моей строке

 <svg width="1440" height="768" viewBox="0 0 1440 768" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2">
 </path>
</svg>

Но idk, какой способ правильный.
Думаю, мне нужно изменить начальную и конечную точки из js.

Большое вам спасибо.

1. M-83.6143 -168.119 начальная точка, 1584.35 794.881 конечная точка. (Надеюсь, это немного поможет)

2. Evolutionxbox прав. Попробуйте использовать это вместо: viewBox="-83 -168 1668 987"

3. @enxaneta Я хочу получить что-то вроде wavify, но не знаю, как это работает

4. @evolutionxbox Я хочу получить что-то вроде wavify, но не знаю, как это работает

5. Можете ли вы предоставить ожидаемый результат, например, в виде простого анимированного GIF?

Ответ №1:

Чтобы гарантировать, что кривая SVG не выходит за пределы SVG canvas, необходимо точно рассчитать ее габаритные размеры.
Это можно сделать с помощью метода JS getBBox().

 let bb = wave.getBBox();

console.log(bb);

 <svg width="1440" height="768" viewBox="0 0 1440 768" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="wave" d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2">
  </path>
 </svg>

Добавьте полученные числа к viewBox

Было viewBox ="0 0 1440 768" теперь `viewBox =»- 83 -168 1668 987 «

Показать фрагмент кода

 <svg width="1440" height="768" viewBox="-83 -168 1668 987" fill="none" xmlns="http://www.w3.org/2000/svg">

<path id="wave" d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2">

    </path>
</svg>

Техника получения анимации `d` `path` атрибута шаг за шагом

Загрузите свой SVG-файл в векторный редактор, такой как Inkscape
Выберите путь и клонируйте его

Примечание

Чтобы анимация выполнялась плавно, без скачков, необходимо, чтобы количество узловых точек и их тип были одинаковыми в начальной и конечной позициях.

Клонирование кривой — самый простой трюк для выполнения этого условия.

Чтобы изменить клон кривой, измените положение узловых точек (на рисунке красная кривая)
Сохраните файл в векторном редакторе
Скопируйте участки начальной и конечной позиций кривой
Анимация d атрибута заключается в перемещении из начальной позиции в конечную

values="path-start;path-finish"

Обновить

Если вы хотите повторяющуюся анимацию от начальной позиции до конечной позиции и обратно в исходную позицию

values="path-start;path-finish;path-start"

Показать фрагмент кода

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="1440" height="768" viewBox="-83 -168 1668 987" fill="none" version="1.1" border="1">
  <path d="M-83.6-168.1C-83.6-168.1-28.2 30.8 74.5 88.1 221.1 169.9 364-134.4 489.6-22.9 541.2 23 522.4 86.3 573.5 132.8 668.6 219.6 808.7 68.7 902.3 157.2 984.4 234.7 886.1 360.2 967.3 438.6 1076.3 543.9 1234.3 326.5 1354.8 418.4 1480.3 514.1 1274 778.9 1427.5 815.6 1487.6 830 1584.4 794.9 1584.4 794.9" stroke="#979F79"  fill="none" stroke-width="2">
    <animate
      attributeName="d"
      dur="5s"
      begin="0s"
      repeatCount="indefinite"
      values ="
        M-83.6-168.1C-83.6-168.1-28.2 30.8 74.5 88.1 221.1 169.9 364-134.4 489.6-22.9 541.2 23 522.4 86.3 573.5 132.8 668.6 219.6 808.7 68.7 902.3 157.2 984.4 234.7 886.1 360.2 967.3 438.6 1076.3 543.9 1234.3 326.5 1354.8 418.4 1480.3 514.1 1274 778.9 1427.5 815.6 1487.6 830 1584.4 794.9 1584.4 794.9;
        
        m-78.8 87.9c0 0 171-311.8 255.7-230.2 124.2 119.8 84.8 203 207.1 230.2 140.8 0 99.3-262.4 265.6-179.1 199.2 49.5 254.4-56.1 316.7-1.2 89.6 31.1-70.6 478.5 36.2 515 149 50.9 195-20.9 315.5 71 125.5 95.6-26.4 245.3 127 282 60.1 14.4 139.3 19.3 139.3 19.3;
        
        M-83.6-168.1C-83.6-168.1-28.2 30.8 74.5 88.1 221.1 169.9 364-134.4 489.6-22.9 541.2 23 522.4 86.3 573.5 132.8 668.6 219.6 808.7 68.7 902.3 157.2 984.4 234.7 886.1 360.2 967.3 438.6 1076.3 543.9 1234.3 326.5 1354.8 418.4 1480.3 514.1 1274 778.9 1427.5 815.6 1487.6 830 1584.4 794.9 1584.4 794.9"
        />
        
  </path>

  <!-- <path d="m-83.6-168.1c0 0 55.4 85.3 158.1 142.6 146.6 81.8 289.6-222.5 415.1-111 51.7 45.9 30.5 67.5 81.6 114 95.2 86.8 239.1-120 332.7-31.5 82 77.5-19.4 337.4 61.8 415.8 109 105.3 270.4-206.5 390.9-114.6 125.5 95.6-83.1 331.7 70.4 368.4 60.1 14.4 157.3 179.2 157.3 179.2" style="fill:none;stroke-width:2;stroke:#f00c79"/> -->
</svg>

Вы можете изменить форму кривой в конечном положении по своему вкусу.
Надеюсь, что этот ответ поможет вам

1. Что мне нужно сделать, если я хочу создать такую волну skrinshoter.ru/s/300820/GIe0lA0s . Я должен взять координаты из сохраненного файла svg, пути, общего доступа или пути > анимировать тег> значения?

2. @Solarsystem Вам нужно подставить координаты в values (m-78.8 87.9c … 19.3;) атрибут конечного пути кривой, как в моем примере. У вас будут разные значения из вашего сохраненного файла. Остальное будет точно таким же, как в примере.

Ответ №2:

Еще один пример анимации `d` атрибута

Вот другая форма пути, которая больше похожа на волну

Техника получения окончательного исправления такая же, как в первом примере.

Начальный путь

Показать фрагмент кода

 * {
padding:0;
margin:0;
}
body {
background:greenyellow;
}

 <div class="morph-shape" id="morph-shape"  >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z"/>
</svg>
</div>

Конечный путь

Показать фрагмент кода

 * {
padding:0;
margin:0;
}
body {
background:greenyellow;
}

 <div class="morph-shape" id="morph-shape"  >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;"/>
</svg>
</div>

Волновая анимация

 * {
padding:0;
margin:0;
}
body {
background:greenyellow;
}

 <div class="morph-shape" id="morph-shape"  >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300"  preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z">
  <animate
    attributeName="d"
    dur="7s"
    repeatCount="indefinite" 
  values=" 
    M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;
    M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;
    M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z" />
</path> 
</svg> 
</div>

Обновить

codepen.io/manabox/pen/BPrNPg Вот так. Но без заливки только обводка 2px

Показать фрагмент кода

 <svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300"  preserveAspectRatio="none">
<path fill="none" stroke="dodgerblue" stroke-width="2" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z">
  <animate
    attributeName="d"
    dur="7s"
    repeatCount="indefinite" 
  values=" 
    M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 ;
    M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 ;
    M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 " />
</path> 
</svg>

1. По-видимому, OP хочет, чтобы это было без заливки, только обводка 2px (последний комментарий)

2. @enxaneta Спасибо enxaneta Я посмотрел ссылку автора для примера, в codepen есть заливка. И это лучше смотрится с начинкой. Если автору не нужна заливка, то нет проблем ее удалить.