我正在应用 SVG 图像蒙版来创建周围的框架和图像，如下所示：
img {
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url('i/test-mask.svg');
}
预期结果：遮罩应不成比例地拉伸以适合元素的尺寸。据我了解，遮罩大小应该与背景大小完全相同，并且这在背景大小中按预期工作（将背景宽度拉伸/扭曲到包含元素宽度的 100%，将高度拉伸到包含元素宽度的 100%）元素的高度）。
实际结果：遮罩包含图像高度的 100%，但保持比例，因此不会显示图像的整个宽度。
我在这里缺少什么？
这是一个工作示例：
img {
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url('i/test-mask.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" 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 …