svg画的边框，如何怎么拉伸都不会变形?

Question

初始有这样一个小矩形边框

<div style="width:1638px;height: 100px">
  <svg height="100%" viewBox="0 0 1638 1024" fill="currentColor" style="color: rgb(16, 148, 229);" preserveAspectRatio="none">
    <path d="M1626.453333 1012.053333H11.946667V11.946667h1614.506666v1000.106666z m-1611.093333-3.413333h1607.68V15.36H15.36v993.28z"></path>
  </svg>
</div>

如果让svg适应到父元素宽度

会发现左右两边的都会被拉宽，有没有办法即使被拉伸也保持四边都是一样的大小。

想要的效果(无论拉伸宽/高，四边都不会变形):

ps------------
用border-image也可以实现此需求

mdn官方的 Border-image 生成器

Answer 1

其实是可以设置的，SVG 中有一个属性 vector-effect可以控制描边不缩放，永远保持默认设置的尺寸，有兴趣的可以参考这篇文章 CSS vector-effect与SVG stroke描边缩放

<svg preserveAspectRatio="none">
    <path vector-effect="non-scaling-stroke">...</path>
</svg>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

需求其实最终是这样，用svg主要还是怕border-image会失真，但貌似svg并不支持这样上文说的效果

暂且border-image实现吧，效果也还行
mdn官方的 Border-image 生成器 真不错