svg - 内联 SVG 模式水平重复并垂直缩放？

Question

我正在寻找一种使用垂直缩放且仅水平重复的内联 SVG 模式的方法。有谁知道这是否可行，如果可以，怎么办？

我知道我可以只使用 SVG 作为背景图像来实现这一点，但我希望能够在基于 javascript/组件的工作流程中使用这个 SVG，所以内联是最适合的。

这是我正在进行的工作的链接：https ://codepen.io/devotee/pen/GRJJpKL

还有一些代码：

<div class="divider">
    <svg width="100%" height="40px">
        <defs>
            <pattern id="pattern" x="0" y="0" width="60" height="6" patternUnits="userSpaceOnUse">
                <path fill="none" stroke="#F5A861" d="M60 5C45 5 45 1 30 1S15 5 0 5"/>
            </pattern>
        </defs>
    <rect x="10" y="6" width="100%" height="12" fill="url(#pattern)" />
</svg>

正如您在链接中看到的那样，这会在两个方向上重复，因此设置更大的高度值并不能达到我想要的效果。我希望这种模式始终填充容器高度（或简单地使用 CSS 设置为一个值）但水平重复。

这里有一些图片来说明我的意思：

顶部是想要的​​行为，底部是不需要的行为：

背景垂直缩放并且不重复。它垂直占用尽可能多的空间（填充父高度或它指定的任何高度值）

顶部是想要的​​行为，底部是不需要的行为： 它不会水平拉伸 SVG，而只是重复它。

关于如何实现这一目标的任何想法或意见？

标签： svg