@Jawell

Как svg fill не растягивать по ширине?

Нужно сделать футер интересной формы
Потом к низу я планирую прилепить просто прямоугольный div, чтобы разместить там контакты и тд.
На самой этой кривой части (#child) есть паттерн (#foot). Сама эта часть (#child) растягивает в зависимости от ширины, с этим все хорошо. Но если с помощью fill залить часть (#second-wave) паттерном (#foot), то паттерн (#foot) тоже растягивается, как этого можно избежать ?
#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>
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
@forspamonly2
у вас фигура сначала раскрашивается, потом растягивается целиком.

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

как вариант, можно отвязать фигуру от экрана путём вывода в экранных координатах прямоугольника без трансформации, которому нужная фигура задана как clipPath с указанной привязкой к системе координат прямоугольника (clipPathUnits="objectBoundingBox").

https://codepen.io/anon/pen/PRMjKR

но в вашем конкретном случае куда проще не пытаться хитро растягивать сам svg, а сделать его метровой ширины и зацикленным, после чего показывать от него сколько влезет фоном у вашего футера. несколько десятков лишних точек в фигуре веса файлу добавит совсем немного.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 40 000 руб.
iXBT Москва
от 70 000 до 90 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
23 сент. 2018, в 21:02
10000 руб./за проект
23 сент. 2018, в 18:12
1000 руб./за проект
23 сент. 2018, в 16:20
20000 руб./за проект