How to svg fill not stretch to width?

Question

css

I need to make a footer with an interesting shape.
Then I plan to stick a simple rectangular div to the bottom to place contacts there and so on.
There is a pattern (#foot) on this curved part (#child) itself. This part itself (#child) stretches depending on the width, everything is fine with that. But if using fill to fill the part (#second-wave) with the pattern (#foot), then the pattern (#foot) is also stretched, how can this be avoided?

#main
{
    position: absolute;
}

#child
{
    -moz-transform: scale(1,-1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    transform: scale(1, -1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

<svg id="child" width="50" height="50" style="width: 100%; height: 160px">
                <svg viewBox="0 0 1366 160" preserveAspectRatio="none" >
                    <pattern id="foot" patternUnits="userSpaceOnUse" viewBox="1 0 4 10" width="60px" height="100px">
                        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="></image>
                        <polygon points="2,0 -0.3,1" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="4,0 6.3,1" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="2,10 -0.3,9" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="4,10 6.3,9" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="2.5,1 0.5,2 0.5,4 2.5,3" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="3.5,1 3.5,3 5.5,4 5.5,2" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="3,4 1,5 3,6 5,5" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="0.5,6 0.5,8 2.5,9 2.5,7" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                        <polygon points="3.5,7 3.5,9 5.5,8 5.5,6" style="fill:#000000;stroke:#ffffff;stroke-width:0.01" />
                    </pattern>
                    <g>
                        <polygon points="0,13 0,57 126,130 338,106 470,125 533,102 724,120 833,84 1142,74 1137,120 1284,135 1366,159 1366,52 843,0"
                                 style="fill:#3a3b40; stroke:#3a3b40" stroke-width="0.1"></polygon>
                        <polygon id="second-wave" points="0,0 0,94 273,137 392,87 523,126 673,92 833,108 979,139 1042,115 1093,132 1366,114 1366,0"
                                 style="fill: url(#foot); stroke:#000000" stroke-width="0.1"></polygon>
                    </g>
                </svg>
            </svg>

Answer 1

у вас фигура сначала раскрашивается, потом растягивается целиком.
чтобы разделить заливку и масштабирование, нужно каким-то образом совместить в одном объекте три системы координат: экранную, фигуры и заливки. а при обычном способе можно только две - у заливки указать что она привязана к системе координат фигуры, и если потом фигуру в экранных координатах трансформировать, заливка трансформируется вместе с ней.
как вариант, можно отвязать фигуру от экрана путём вывода в экранных координатах прямоугольника без трансформации, которому нужная фигура задана как clipPath с указанной привязкой к системе координат прямоугольника (clipPathUnits="objectBoundingBox").
https://codepen.io/anon/pen/PRMjKR
но в вашем конкретном случае куда проще не пытаться хитро растягивать сам svg, а сделать его метровой ширины и зацикленным, после чего показывать от него сколько влезет фоном у вашего футера. несколько десятков лишних точек в фигуре веса файлу добавит совсем немного.