How to stretch path inside svg to full screen width?

Question

Layout

There is a code using a mask:

<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>

Everything works, but apparently the path does not see the viewBox property of the svg.
Therefore, it turns out something like this:



Can you tell me how to fix this?
Or maybe there is some other way to add a mask, with the ability to animate the cropped image in the future.

Answer 1

If you use svg clipPath from css, then it is more convenient to make the path with relative coordinates (i.e. the upper left corner of the picture has coordinates (0, 0), the lower right corner (1, 1)), and set the clipPath attribute itself to clipPathUnits="objectBoundingBox"

Or maybe there is some other way to add a mask

css.yoksel.ru/svg-masks