Как растянуть path внутри svg по всей ширине экрана?

Question

[olovo321]

Есть код с использованием маски:

<div class="main relative">
        <div class="main__bg">

        </div>

        <img class="main__image-mask" src="img/main__bg.jpg">
        
        <svg xmlns="http://www.w3.org/2000/svg" class="main__svg" height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 1921.339 566.951">
          <defs>
            <clipPath id="myClip">
              <path id="Path_27" data-name="Path 27"  d="M1906.011,483.64c-14.293-.643-25.757-3.117-36.03-7.733-20.5-9.16-41.453-28.267-64.126-58.389-16.568-21.747-32.776-47.944-49.918-75.663-21.375-34.524-43.474-70.191-70.379-104.739-31.478-40.021-62.382-68.525-97.37-89.916a273.7,273.7,0,0,0-143.63-40.235h-1.042c-40.538,0-78.8,8.161-114.044,24.15-65.254,29.623-108.217,79.946-134.867,115.208-23.8,31.883-43.878,64.266-63.3,95.578-18.844,30.408-36.646,59.1-54.683,81.8-16.909,21.581-33.18,37.165-48.536,46.469-16.441,9.874-31.627,13.99-52.237,14.109-15.441-.048-28.181-2.617-41.028-8.375-20.461-9.16-41.432-28.267-64.083-58.389-16.569-21.747-32.754-47.9-49.919-75.663-21.354-34.477-43.453-70.191-70.379-104.739-31.478-40.021-62.361-68.525-97.348-89.916a273.663,273.663,0,0,0-143.651-40.235c-41.581,0-79.844,8.161-115.066,24.15C329.124,160.739,286.16,211.062,259.51,246.324c-23.821,31.883-43.9,64.266-63.318,95.578-18.844,30.408-36.647,59.1-54.683,81.8-16.93,21.581-33.2,37.165-48.557,46.469-13.421,8.066-26.246,12.111-42.687,13.4L18,486.186V673.917L54.285,672.3c36.157-1.618,70.06-9.494,100.794-23.46,65.253-29.623,108.238-79.97,134.888-115.232,23.8-31.86,43.878-64.242,63.3-95.6,18.866-30.36,36.647-59.1,54.661-81.778,16.93-21.58,33.243-37.165,48.557-46.492,16.483-9.874,31.648-13.967,52.237-14.109,15.462.071,28.2,2.641,41.049,8.4,20.482,9.137,41.453,28.267,64.1,58.413,16.569,21.723,32.776,47.92,49.918,75.639,21.376,34.477,43.453,70.191,70.358,104.739,31.478,40,62.361,68.5,97.37,89.916a273.762,273.762,0,0,0,143.63,40.187c41.581,0,79.844-8.09,115.065-24.079,65.253-29.67,108.217-79.97,134.867-115.255,23.821-31.883,43.878-64.266,63.3-95.579,18.844-30.408,36.647-59.1,54.661-81.778,16.93-21.58,33.222-37.165,48.557-46.492,16.463-9.874,31.627-13.967,52.215-14.109,15.463.071,28.2,2.641,41.049,8.4,20.482,9.137,41.453,28.267,64.1,58.413,16.59,21.723,32.775,47.9,49.94,75.639,21.375,34.477,43.453,70.191,70.379,104.739,31.478,40,62.382,68.5,97.37,89.916,40.3,24.84,87.756,38.569,137.079,39.759l35.6.833V485.187Z" transform="translate(-18 -106.966)" fill="#4095c7" pathLength="140"/>
            </clipPath>
          </defs>
        </svg>

    </div>

Всё работает, но судя по всему path не видит свойства viewBox у svg.
Следовательно, получается что-то такое:



Не подскажете как это пофиксить?
Или может есть какой-то другой способ добавления маски, с возможностью анимировать обрезаную картинку в дальнейшем.

Answer 1

[RAX7]

Если используешь svg clipPath из css, то удобней сделать path с относительными координатами (т.е. верхние левый угол картинки имеет координаты (0, 0), нижний правый (1, 1)), а самому clipPath задать атрибут clipPathUnits="objectBoundingBox"

Или может есть какой-то другой способ добавления маски

css.yoksel.ru/svg-masks