内联SVG模式水平重复和垂直缩放？

我正在寻找一种使用内联SVG模式的方法，该模式可以垂直缩放，并且只能水平重复。有人知道这是否可能，如果可能，如何做到

我知道我可以使用SVG作为背景图像，但我希望能够在基于javascript/组件的工作流中使用SVG，因此内联是最适合的

以下是我正在进行的工作的链接：

还有一些代码：

<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设置为一个值），但水平重复

以下是一些图片来说明我的意思：

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

<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>

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

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

---

关于如何实现这一点，您有什么想法或意见吗？

请添加图片以澄清您的问题。你到底想得到什么样的结果？添加图像，我希望现在已经清楚了。