заполнить путь SVG рисунком без растяжения - PullRequest
Новая
       35

заполнить путь SVG рисунком без растяжения

0 голосов
/ 20 февраля 2019

Я пытаюсь использовать редактировать этот пример и заполнить волну узором 

<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">

                <defs>
                    <pattern id="img4" patternUnits="userSpaceOnUse" width="180" height="180">
                        <image xlink:href="./pattern/menu-3.png" x="0" y="0" width="180" height="180" />
                    </pattern>
                </defs>


                <path class="shape-overlays__path"></path>
                <path class="shape-overlays__path"></path>
                <path class="shape-overlays__path"></path>
                <path class="shape-overlays__path"></path>
            </svg>

CSS 

.shape-overlays__path:nth-of-type(4) {
 fill: url(#img4);
 stroke: red;
 stroke-width: 1;
}

путь SVG заполненизображение шаблона, но оно не повторяется и также растягивается

Я бы хотел, чтобы оно повторялось как шаблон, если это невозможно, я хотел бы использовать большое изображение в качестве обложки, но сохраняя пропорции

1 Ответ

0 голосов
/ 26 февраля 2019

для решения проблемы я изменил preserveAspectRatio на "xMidYMid slice" вместо "none" 

<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" >
...