Как отложить SVG?

Question

[partyzanx]

Получается, при анимации виден разрыв. Помогите, пожалуйста.

Comments

[Ankhena]

Не на те половинки разделили svg. Уберите из лупы горизонтальную черту вообще. Лупа сама по себе, линия сама по себе.

[partyzanx]

Ankhena, тогда нельзя будет сделать адаптированную линию с width: 100vw - 180px

[Ankhena]

partyzanx, эмммм... длина линии не влияет на адаптивность

[partyzanx]

Ankhena, влияет на адаптивность, нужно чтобы длина линии подстраивалась под ширину экрана и не заходила за рамки родительского элемента и не была маленький длины.

[partyzanx]

Ankhena, вот здесь как Вы говорили, но адаптивную ширину невозможно сделать . Попробуйте Как адаптировать длину svg?

[Ankhena]

partyzanx, ой, ну да, придется внести изменения в calc на ширину добавки горизонтальной палочки

[Ankhena]

partyzanx,

но адаптивную ширину невозможно сделать

Лупа отдельно, горизонтальная линия отдельно. Хоть вообще через border, а не svg и анимируйте ширину.

[partyzanx]

Ankhena, вот я примерно так и хочу. Помогите, пожалуйста, сделать так, чтобы лупа был без нижней палочки влево. То есть от svg оставить только лупу без длинной палочки вообще

[Ankhena]

partyzanx, В любом графическом редакторе сотрите, например, в Inkscape

[partyzanx]

Ankhena, я пробовал вставить в графические дизайнеры, не открывалось. Вставлял

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 28" id="path">
        <path d="M32.9418651,-20.6880772 C37.9418651,-20.6880772 40.9418651,-16.6880772 40.9418651,-12.6880772 C40.9418651,-8.68807717 37.9418651,-4.68807717 32.9418651,-4.68807717 C27.9418651,-4.68807717 24.9418651,-8.68807717 24.9418651,-12.6880772 C24.9418651,-16.6880772 27.9418651,-20.6880772 32.9418651,-20.6880772 L32.9418651,-29.870624 C32.9418651,-30.3676803 33.3448089,-30.770624 33.8418651,-30.770624 C34.08056,-30.770624 34.3094785,-30.6758029 34.4782612,-30.5070201 L141.371843,76.386562" transform="translate(83.156854, 22.171573) rotate(-225.000000) translate(-83.156854, -22.171573)"></path>
    </symbol>
</svg>

[Ankhena]

partyzanx, а вы прям так с display:none и вставляли?
Возможно, еще symbol надо будет заменить или убрать, если убрать, то viewBox переписать к svg.

[partyzanx]

Ankhena, display none убрал) Как редактировать viewbox не знаю)

[Ankhena]

partyzanx,

Как редактировать viewbox не знаю)

ctrl+c ctrl+v из символа в svg

[partyzanx]

Ankhena, Вы можете просто в JSFiddle сделать, пожалуйста?

[Ankhena]

partyzanx, с телефона он работает очень не удобно

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 28" >
    
        <path d="M32.9418651,-20.6880772 C37.9418651,-20.6880772 40.9418651,-16.6880772 40.9418651,-12.6880772 C40.9418651,-8.68807717 37.9418651,-4.68807717 32.9418651,-4.68807717 C27.9418651,-4.68807717 24.9418651,-8.68807717 24.9418651,-12.6880772 C24.9418651,-16.6880772 27.9418651,-20.6880772 32.9418651,-20.6880772 L32.9418651,-29.870624 C32.9418651,-30.3676803 33.3448089,-30.770624 33.8418651,-30.770624 C34.08056,-30.770624 34.3094785,-30.6758029 34.4782612,-30.5070201 L141.371843,76.386562" transform="translate(83.156854, 22.171573) rotate(-225.000000) translate(-83.156854, -22.171573)"></path>
    
</svg>

[Ankhena]

partyzanx, и у вас же есть решение в предыдущем вопросе. С виду подходит под то, что вам нужно

Answer 1

[lukoie]

Если на 77 строке поставить всего 0,4 секунды, то практически не заметно.
Разрыв там потому что это две свгшки.
Если хотите отложенность, пишите в стиле класса
animation-delay: .2s;

Comments

[partyzanx]

animation-delay у меня никогда не срабатывал. Почему ?
Вот я его вставил, и он не сработал. Посмотрите, пожалуйста.

[lukoie]

1 -webkit-animation-delay
2 вот тут гляньте пример https://webref.ru/css/animation-delay
3 тут аналогичные свойства https://idg.net.ua/blog/uchebnik-css/ispolzovanie-...

[lukoie]

попробуйте еще

.searchicon input+div svg.line {
  right: 4px;

так наверное будет лучше всего в данном случае

[partyzanx]

lukoie, вот это круто! спасибо!