用图案填充 SVG 路径而不拉伸答案

【问题标题】：fill SVG path with pattern without stretching用图案填充 SVG 路径而不拉伸
【发布时间】：2019-07-14 11:44:49
【问题描述】：

我正在尝试使用编辑此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 路径填充有图案图像，但不重复，也被拉伸

我想把它作为一个图案重复，如果不可能的话我想用一张大图作为封面但保持比例

【问题讨论】：

请在您的问题中提供一个有效的测试用例

标签： html css image svg background-image

【解决方案1】：

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

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

【讨论】：