mask-size: 100% 100% 不横向拉伸

Question

我正在应用 SVG 图像蒙版来创建一个框架和图像，如下所示：

        img {
            mask-repeat: no-repeat;
            mask-size: 100% 100%;
            mask-image: url('i/test-mask.svg');
        }

预期结果：遮罩应不成比例地拉伸以适应元素的大小。掩码大小，据我所知，应该像背景大小一样工作，并且这在背景大小中按预期工作（stretching/distorting 背景宽度为包含元素宽度的 100%，高度为包含元素宽度的 100%包含元素的高度）。

实际结果：蒙版包含到图像高度的 100%，但保持比例，因此不会显示图像的整个宽度。

我在这里错过了什么？

这是一个工作示例：

img.masked {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
}

img {
  display: block;
  margin-top: 20px;
}
svg.example {
  max-width: 500px;
}

<p>Masked image:</p>
<img class="masked" src="https://picsum.photos/500/250" width="500" height="250" />


<p>Original Image:</p>
<img src="https://picsum.photos/500/250" width="500" height="250" />

<p>Image Mask:</p>
<svg class="example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>

https://jsfiddle.net/StudioAl/jokbL97u/29/

预计到达时间：链接的 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1922.5 1920" xml:space="preserve"><path d="M1922.5 3.9c-5.6-.5-11.1-1.5-16.5-2.9-14.9 5.1-29.6.9-44.4-1l-196.5 5.6c-1.3-.2-2.6-.2-3.9-.4-3.3-.4-6.6-.2-9.8.7l-22.2 1.7c-2.7-.4-5.4-.2-8 .6l-11.5 1.8c-1.3.1-2.7.3-4 .6l-24.7 3.8c-17.2 2.9-34.5 2.4-51.7 1.2-20.6-1.4-41.6 4.2-61.9-3-1.8-.7-4.5.6-6.8.9-5 .6-10.1 1.7-15.1 1.6-13.3-.2-26.7-3.2-40.1-1.1-3.9.7-7.8 1.1-11.7 1.3-12.1.1-24.1.4-36.2.3-5.1-.1-10.2-1.1-15.3-1.4-9.2-.6-18.5-1.9-27.6-1.1-17.7 1.5-35.4 6.5-52.8 5.7-17.2-.8-34.3 1-51.6-1-21.6-2.5-43.9-.4-65.9-.7-31-.4-62-1.3-92.9-1.9-11.1-.2-22.3-.1-33.5-.6-15.8-.7-31.7-.6-47.5.4-16.6 1.1-33.4-1.7-50.2-2.5-5.2-.3-10.3.6-15.5.9-13.9.7-27.8 1.5-41.7 1.7-3.9 0-7.9-.3-11.8-.5-15.7-.8-31.6 3.1-47.3-1.3-3-.8-6.6 0-9.8.3-5.5.5-11 1.8-16.5 1.7-18.2-.3-36.5-1.4-54.8-1.6-22.5-.3-45.1.1-67.7 0-37.3-.1-74.5-.1-111.8-.5-14.8-.1-48.1-1.4-62.9-1.9-11.7-.4-23.5-.3-35.2-1.1-16.4-1-32.8-3-49.3-4-33.8-1.9-67.4-4.5-101.5-.6-25.8 2.9-51.7 3-77.7 2.5-9.1-.1-19.1 3.3-27.4 1.1-17.2-4.6-34.4-.7-51.7-2.5C106 3.4 73.8 4.1 41.8 3.6c-13.1-.2-26.2-.2-39.3-.2v576.2H0v1325h.5c34.8.2 69.7 1.1 104.5 1.8 5.6.2 11.2 1.2 16.8 1.1 19.7-.3 39.3-1.5 58.9-1.3 28.7.3 57.4 1.8 86.1 2.1 19.3.3 38.6-1.1 57.8-.8 18.2.3 36.4 2.7 54.6 2.3 44.1-1 88.1 5.1 132.4 1.3 16.1-1.4 32.5.9 48.8 1.4 20.7.7 41.6 3 62.1 1.2 17.2-1.5 34.3-.7 51.4-.9 21.8-.3 57.4-1.2 79.2-1.4 21.2-.2 42.5-.9 63.8-.7 15.3.1 30.6-3.4 46-.1 1.8.3 3.8-.2 5.7-.3 18.3-.8 36.6-1.7 54.9-2.3 42.7-1.3 85.5-2.5 128.2-3.4 15-.3 30.1.3 45.2.8 3.6.2 7.1 2 10.7 2 20.2 0 40.4-1 60.6-.5 25.8.7 51.5 2.7 77.2 3.8 23.4.9 46.9 1.3 70.3 2.2 25.7.9 51.4 2 76.8 3.3 11.3.6 22.9.4 33.6 3 2.1.6 4.4.8 6.6.8.6 0 1.3-.1 1.9-.1l53.3-1.2c8.1.5 16.2.3 24.2-.6h1.4v-.1c5.1-.6 10-1.6 14.9-2.9 2.6-.8 6.3-2.1 8-1.1 9.4 5.5 19.3 2.1 29 2 13.8-.1 27.9-2.6 41.1-.5 14.1 2.2 27.1-8.4 41-1.1 1.5.7 5.1-1.6 7.7-2.6s5.7-3.7 7.6-3.1c11.2 3.3 21.6-1 32-2.4 11.1-1.5 22.7 4 33.2-1.9 4.2-2.3 9.5-2.7 14.3-1.8 10 1.8 20.5 2.1 30.7 2.1 16.5 0 33-.5 49.5-1.2 6.6-.2 13-1.8 19.5-2.1 12.7-.5 25.9-5.2 36.9 6.3 4.5 4.8 12.5 7.7 19.5 9.7 2.1.6 4.4 1 6.6 1.1h1.2l16.3-.1V3.9z"/></svg>

Answer 1

您需要将 preserveAspectRatio="none" 设置为 SVG

img.masked {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" preserveAspectRatio="none" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
}

img {
  display: block;
  margin-top: 20px;
}
svg.example {
  max-width: 500px;
}

<p>Masked image:</p>
<img class="masked" src="https://picsum.photos/500/250" width="500" height="250" />


<p>Original Image:</p>
<img src="https://picsum.photos/500/250" width="500" height="250" />

<p>Image Mask:</p>
<svg class="example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>

mask-size: 100% 100% 不横向拉伸

mask-size: 100% 100% does not stretch horizontally

css

svg

css-mask