如何外部控制SVG图案描边？寻求动态宽度实现替代方案

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

我原本认为这无法实现，但仍想在放弃前寻求解决方案。我正用JavaScript创建带动态宽度的<use>元素，将其分为起始（左侧）、中间、结束（右侧）三部分：起始元素固定，结束元素通过<use>的x属性定位，中间元素是填充<pattern>链接的<rect>。我曾认为pattern是实现真正动态宽度并支持任意形状的唯一方式，但它存在严重局限：一是使用pattern的<rect>自身不能有描边；更关键的是无法从<use>元素控制描边，必须在<pattern>元素本身设置stroke属性（fill也有同样限制）。我希望能为<use>元素整体应用渐变，但pattern不支持此功能，虽有临时解决办法但过于繁琐，是否存在满足需求的动态宽度实现替代方案？

嘿，我完全懂你遇到的Pattern痛点——它的属性隔离机制确实让人头疼，尤其是想给整个组件统一应用渐变描边的时候。Pattern的内部元素根本没法继承外部<use>或父元素的样式，这确实是个大局限。不过别担心，我们可以换个思路，放弃Pattern，改用动态组合元素的方式来实现需求，下面是几个靠谱的替代方案：

这个思路核心是把起始、中间、结束三个部分拆成独立元素，用JS动态计算中间段的尺寸，然后把所有元素放在同一个<g>下，给这个<g>统一设置渐变stroke，这样所有子元素都会继承这个样式。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 48" height="480" fill="none">
  <defs>
    <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="240" y2="24">
      <stop stop-color="#070" offset="0"/>
      <stop stop-color="#007" offset="1"/>
    </linearGradient>
    <!-- 起始段可复用符号 -->
    <symbol id="start">
      <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"/>
    </symbol>
    <!-- 结束段可复用符号 -->
    <symbol id="end">
      <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"/>
    </symbol>
  </defs>
  <!-- 动态组件容器，统一设置渐变描边 -->
  <g id="dynamic-container" stroke="url(#grad)">
    <use href="#start"/>
    <!-- 中间段将通过JS动态生成 -->
    <g id="middle-section"></g>
    <use href="#end" id="end-use"/>
  </g>
</svg>

<script>
// 可以动态修改这个总宽度值
const totalWidth = 240;
// 起始和结束段的固定宽度
const startWidth = 48;
const endWidth = 48;
// 计算中间段的宽度
const middleWidth = totalWidth - startWidth - endWidth;

// 获取DOM元素
const middleSection = document.getElementById('middle-section');
const endUse = document.getElementById('end-use');

// 定位结束段的位置
endUse.setAttribute('x', startWidth + middleWidth);

// 生成匹配原始样式的中间段路径
const middlePaths = `
  <path d="M${startWidth},4.5 H${startWidth + middleWidth}"/>
  <path d="M${startWidth},43.5 H${startWidth + middleWidth}"/>
  <path d="M${startWidth},9 H${startWidth + middleWidth}" stroke-width="2"/>
  <path d="M${startWidth},39 H${startWidth + middleWidth}" stroke-width="2"/>
`;
middleSection.innerHTML = middlePaths;

// 可选：更新SVG viewBox以适配新的总宽度
document.querySelector('svg').setAttribute('viewBox', `0 0 ${totalWidth} 48`);
</script>

这个方案的优势：

• 整个组件的stroke完全继承自父<g>，渐变可以直接应用在父元素上，完美解决样式统一问题
• 中间段完全动态，支持任意宽度调整
• 不需要依赖Pattern，彻底避开它的属性隔离限制

如果你的场景不需要复杂的JS逻辑，纯CSS就能搞定动态宽度，我们可以用CSS变量来计算元素尺寸：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 48" height="480" fill="none" style="--total-width: 240; --start-width: 48; --end-width: 48;">
  <defs>
    <linearGradient id="grad-css" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="var(--total-width)" y2="24">
      <stop stop-color="#070" offset="0"/>
      <stop stop-color="#007" offset="1"/>
    </linearGradient>
    <symbol id="start-css">
      <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"/>
    </symbol>
    <symbol id="end-css">
      <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"/>
    </symbol>
  </defs>
  <g stroke="url(#grad-css)">
    <use href="#start-css"/>
    <!-- 用CSS变量计算中间段的路径位置 -->
    <path d="Mvar(--start-width),4.5 Hcalc(var(--total-width) - var(--end-width))"/>
    <path d="Mvar(--start-width),43.5 Hcalc(var(--total-width) - var(--end-width))"/>
    <path d="Mvar(--start-width),9 Hcalc(var(--total-width) - var(--end-width))" stroke-width="2"/>
    <path d="Mvar(--start-width),39 Hcalc(var(--total-width) - var(--end-width))" stroke-width="2"/>
    <use href="#end-css" x="calc(var(--total-width) - var(--end-width))"/>
  </g>
</svg>

之后你只需要修改CSS变量就能调整宽度，比如：

svg {
  --total-width: 300; /* 改这个值就能让组件变宽 */
}

这个方案适合简单的动态场景，不需要写JS代码，同时保持样式的统一性。

如果你的中间段需要更复杂的形状（不是简单的直线），可以用<clipPath>把一个矩形裁剪成你需要的形状，然后给裁剪后的元素设置stroke，这样也能继承父元素的渐变：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 48" height="480" fill="none">
  <defs>
    <linearGradient id="grad-clip" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="240" y2="24">
      <stop stop-color="#070" offset="0"/>
      <stop stop-color="#007" offset="1"/>
    </linearGradient>
    <symbol id="start-clip">
      <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"/>
    </symbol>
    <symbol id="end-clip">
      <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"/>
    </symbol>
    <!-- 中间段的裁剪路径，定义你需要的复杂形状 -->
    <clipPath id="middle-clip">
      <path d="M0,4.5 H100 V43.5 H0 M0,9 H100 M0,39 H100"/>
    </clipPath>
  </defs>
  <g stroke="url(#grad-clip)">
    <use href="#start-clip"/>
    <!-- 裁剪后的矩形作为中间段，继承父元素的渐变描边 -->
    <g id="middle-clip-container" clip-path="url(#middle-clip)">
      <rect x="48" y="0" width="144" height="48" stroke-width="2"/>
    </g>
    <use href="#end-clip" x="192"/>
  </g>
</svg>

然后用JS动态调整裁剪路径的宽度和矩形的宽度即可，这样中间段可以保持复杂的形状，同时继承父元素的stroke渐变。

内容的提问来源于stack exchange，提问作者Sideways S