Question

我正在尝试使用此example进行编辑，并在波形中填充图案

<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路径填充有图案图像，但不重复且也被拉伸

我希望将其重复作为一种模式，如果不可能的话，我想使用大图像作为封面，但要保持比例

Answer 1

为解决该问题，我将 preserveAspectRatio 更改为“ xMidYMid slice”，而不是“ none”

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

用图案填充SVG路径而无需拉伸

1 个答案: