Как сделать svg изображение адаптивным?

Question

какие нужны теги, условия, для того, чтобы волна нормально встала? Причем в масштабе 110% все ок

`<svg class="wave1" viewBox=" 0 0 -300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 64.5L35.2 50.1667C71.4667 35.8333 141.867 7.16667 213.333 3.58333C284.8 0 355.2 21.5 426.667 25.0833C498.133 28.6667 568.533 14.3333 640 14.3333C711.467 14.3333 781.867 28.6667 853.333 46.5833C924.8 64.5 995.2 86 1066.67 78.8333C1138.13 71.6667 1208.53 35.8333 1244.8 17.9167L1280 0V129H1244.8C1208.53 129 1138.13 129 1066.67 129C995.2 129 924.8 129 853.333 129C781.867 129 711.467 129 640 129C568.533 129 498.133 129 426.667 129C355.2 129 284.8 129 213.333 129C141.867 129 71.4667 129 35.2 129H0V64.5Z" fill="#A92FD5" fill-opacity="0.65"/>
</svg>`

Answer 1

viewBox="0 0 1280 120"

По поводу двух class для одного path

Увидел у вас в path d="" всего одну точку по координате X равную 1280 и предположил что viewBox выставлен не правильно так как он у вас по оси X отрицательный то есть -300 поменял его на положительный и сменив по оси Y на меньшее число 120 SVG'шка стала тянуться и разумеется что я выпилил то что не нужно : смотрим

<body style="margin:0;">
  <svg viewBox="0 0 1280 120" xmlns="http://www.w3.org/2000/svg">
  <path  d="M0 64.5L35.2 50.1667C71.4667 35.8333 141.867 7.16667 213.333 3.58333C284.8 0 355.2 21.5 426.667 25.0833C498.133 28.6667 568.533 14.3333 640 14.3333C711.467 14.3333 781.867 28.6667 853.333 46.5833C924.8 64.5 995.2 86 1066.67 78.8333C1138.13 71.6667 1208.53 35.8333 1244.8 17.9167L1280 0V129H1244.8C1208.53 129 1138.13 129 1066.67 129C995.2 129 924.8 129 853.333 129C781.867 129 711.467 129 640 129C568.533 129 498.133 129 426.667 129C355.2 129 284.8 129 213.333 129C141.867 129 71.4667 129 35.2 129H0V64.5Z" fill="#A92FD5" fill-opacity="0.65"/>
</svg>

БЛОГ НА HUSL

Как сделать svg изображение адаптивным?

Ответы (1 шт):