如果让SVG填充按钮，它将zoom 整个SVG，从而拉伸边框.相反，您可以修改SVG视图框和路径以适合您需要的大小.这里有几个例子.
因为你使用的是Reaction，如果你知道高度和宽度，你就可以使用props 在这个基础上建造它.(如果它需要处理未知的高度和宽度，您可以使用JavaScript来计算文本的宽度，并在运行时根据该宽度设置属性.)
[Note:我还将背景 colored颜色 移到了SVG中，使按钮背景透明，并将SVG设置为-1 z-index以显示在文本后面.]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: black;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
section {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1em;
}
.button {
position: relative;
background-color: transparent;
border: 0;
color: white;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
max-width: 100%;
}
button svg {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
button rect {
animation: button-border 2s linear both;
}
button path {
animation: button-border 1s linear both;
}
@keyframes button-border {
to {
stroke-dashoffset: 0;
}
}
<section>
<button
type="button"
class="button"
style="width: 200px; height: 40px"
>
My Button
<svg viewBox="0 0 200 40" fill="none" preserveAspectRatio="none">
<rect x="1" y="1" width="198" height="38" fill="#083a65" rx="9.5" ry="9.5" />
<path
d="M100,1
h90
q9.5,0 9.5,9.5
v19
q0,9.5 -9.5,9.5
h-90
"
stroke="red"
stroke-dasharray="460"
stroke-dashoffset="460"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
<path
d="M100,1
h-90
q-9.5,0 -9.5,9.5
v19
q0,9.5 9.5,9.5
h90
"
stroke="red"
stroke-dasharray="460"
stroke-dashoffset="460"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
</svg>
</button>
<button
type="button"
class="button"
style="width: 400px; height: 40px"
>
My Button with Longer Text
<svg viewBox="0 0 400 40" fill="none" preserveAspectRatio="none">
<rect x="1" y="1" width="398" height="38" fill="#083a65" rx="9.5" ry="9.5" />
<path
d="M200,1
h190
q9.5,0 9.5,9.5
v19
q0,9.5 -9.5,9.5
h-190
"
stroke="red"
stroke-dasharray="860"
stroke-dashoffset="860"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
<path
d="M200,1
h-190
q-9.5,0 -9.5,9.5
v19
q0,9.5 9.5,9.5
h190
"
stroke="red"
stroke-dasharray="860"
stroke-dashoffset="860"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
</svg>
</button>
<button
type="button"
class="button"
style="width: 400px; height: 120px"
>
My Button with Longer Text
<svg viewBox="0 0 400 120" fill="none" preserveAspectRatio="none">
<rect x="1" y="1" width="398" height="118" fill="#083a65" rx="9.5" ry="9.5" />
<path
d="M200,1
h190
q9.5,0 9.5,9.5
v99
q0,9.5 -9.5,9.5
h-190
"
stroke="red"
stroke-dasharray="1020"
stroke-dashoffset="1020"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
<path
d="M200,1
h-190
q-9.5,0 -9.5,9.5
v99
q0,9.5 9.5,9.5
h190
"
stroke="red"
stroke-dasharray="1020"
stroke-dashoffset="1020"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
</svg>
</button>
</section>
总而言之:
<button
type="button"
class="button"
style="width: {{width}}px; height: {{height}}px"
>
My Button with Longer Text
<svg viewBox="0 0 {{width}} {{height}}" fill="none" preserveAspectRatio="none">
<rect x="1" y="1" width="{{width - 2}}" height="{{height - 2}}" fill="#083a65" rx="9.5" ry="9.5" />
<path
d="M{{width / 2}},1
h{{width / 2 - 10}}
q9.5,0 9.5,9.5
v{{height - 9.5*2 - 2}}
q0,9.5 -9.5,9.5
h-{{width / 2 - 10}}
"
stroke="red"
stroke-dasharray="{{height * 2 + width * 2 - 20}}"
stroke-dashoffset="{{height * 2 + width * 2 - 20}}"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
<path
d="M{{width / 2}},1
h-{{width / 2 - 10}}
q-9.5,0 -9.5,9.5
v{{height - 9.5*2 - 2}}
q0,9.5 9.5,9.5
h{{width / 2 - 10}}
"
stroke="red"
stroke-dasharray="{{height * 2 + width * 2 - 20}}"
stroke-dashoffset="{{height * 2 + width * 2 - 20}}"
stroke-width="1"
vectorEffect="non-scaling-stroke"
/>
</svg>
</button>
