How to externally control stroke of SVG pattern - svg

Question

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 192 96" height="480" fill="none" stroke="#000">
<defs>
<linearGradient id="gradInner" gradientUnits="userSpaceOnUse">
<stop stop-color="#070" offset="0"/>
<stop stop-color="#007" offset="1"/>
</linearGradient>
<g id="shape-s">
<path d="M48,4.5 H4.5 V43.5 H48"/>
<path d="M48,9 H24 A15,15 0 0,0 24,39 H48" stroke-width="2"/>
</g>
<pattern id="shape-m" width="48" height="48" patternUnits="userSpaceOnUse">
<path d="M0,4.5H48M0,43.5H48"/>
<path d="M0,9H48M0,39H48" stroke-width="2"/>
</pattern>
<g id="shape-e">
<path d="M 0,4.5 H43.5 V43.5 H0"/>
<path d="M 0,9 H24 A15,15 0 0,1 24,39 H0" stroke-width="2"/>
</g>
<g id="shape">
<rect fill="url(#shape-m)" stroke="none" x="48" width="48" height="48"/>
<use xlink:href="#shape-s"></use>
<use xlink:href="#shape-e" x="96"></use>
</g>
</defs>
<g stroke="url(#gradInner)">
<path d="M48,4.5 H4.5 V43.5 H48"/>
<path d="M48,4.5H96M48,43.5H96"/>
<path d="M96,4.5 h43.5 v39 H96"/>
<path d="M48,9 H24 A15,15 0 0,0 24,39 H48" stroke-width="2"/>
<path d="M48,9H96M48,39H96" stroke-width="2"/>
<path d="M96,9 h24 a15,15 0 0,1 0,30 H96" stroke-width="2"/>
</g>
<use xlink:href="#shape" y="48" stroke="url(#gradInner)"/>
</svg>
I am thinking that this is not possible, but I want to fish for a solution here before I throw in the towel. I am creating <use> elements with dynamic widths in JavaScript. I do it by grouping 3 elements: start/left, middle, end/right. The start element is always the same. The end element is positions by the x attribute of the <use>. The middle element is a <rect> filled with a <pattern> url.
The pattern was the only way I could see to be truly dynamic in width and support any kind of shape. But patterns also have serious limitations. The first problem is that the <rect> using the pattern must have no stroke of its own. The bigger problem is that I cannot control the stroke from the <use> element, I must set the stroke attribute on the <pattern> element itself. (of course the same limitations apply to fill as stroke)
Is there another solution for this? I want to be able to apply a gradient to the <use> element as a whole. A pattern does not allow for this. I can work around that, but it's clumsy and I'd rather not. Is there another solution for dynamic width that meets my needs?