@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>
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
  • @forspamonly2
    у вас фигура сначала раскрашивается, потом растягивается целиком.

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

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

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

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

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

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
TechFunder Винница
от 1 000 eur.
18 июля 2018, в 02:48
3000 руб./за проект
17 июля 2018, в 22:59
1200 руб./за проект