div内SVG随容器缩放时如何保持圆角宽高比不发生形变

问题根因 #

你使用preserveAspectRatio="none"让SVG整体拉伸适配容器时，固定viewBox内的圆角属性rx会跟着整体长宽比一起拉伸，自然出现变形；且你把preserveAspectRatio属性加在了<rect>标签上，该属性仅对<svg>根元素生效，配置完全没有生效。

方案1：修改现有SVG代码适配动态容器 #

直接调整SVG的属性，让圆角和描边都不受缩放影响，同时渐变适配容器尺寸：

<svg id="level1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <style>
      .border-unique-ability {
        fill: none;
        stroke-miterlimit: 10;
        stroke-width: 5px;
        stroke: url("#Gradient_7");
        /* 保证描边宽度不随缩放改变 */
        vector-effect: non-scaling-stroke;
      }
    </style>
    <!-- 渐变单位改为容器相对单位，适配任意尺寸 -->
    <linearGradient id="Gradient_7" x1="100%" y1="100%" x2="0%" y2="0%" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#fff" stop-opacity="0.1"/>
      <stop offset="1" stop-color="#fff"/>
    </linearGradient>
  </defs>
  <!-- 矩形宽高用百分比适配容器，圆角用固定像素值保证不变形 -->
  <rect class="border-unique-ability" x="2.5px" y="2.5px" width="calc(100% - 5px)" height="calc(100% - 5px)" rx="8px"/>
</svg>

同时调整你的CSS，给父容器加相对定位，保证文字层级高于边框：

.border {
  position: relative;
  /* 可自行添加内边距控制内容和边框的间距 */
}
.border svg {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.border p {
  position: relative;
  z-index: 1;
}

方案2：纯CSS实现渐变圆角边框（更推荐） #

如果不需要复杂的SVG特效，直接用CSS实现的渐变圆角边框适配性更强，完全不会出现变形问题：

.border {
  position: relative;
  border-radius: 8px;
  /* 自行调整内边距控制内容和边框间距 */
  padding: 12px;
}
.border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 5px; /* 对应边框宽度 */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), #fff);
  /* 实现镂空渐变边框效果 */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

使用这个方案可以完全删掉原来引入的SVG文件，代码更精简，性能更好。

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