如何让SVG的stdDeviation参数响应式，保证不同分辨率下圆角效果一致

你遇到的偏差本质是SVG滤镜的stdDeviation默认以像素为单位，高DPI（5K）屏幕下devicePixelRatio大于1，固定数值15映射到CSS像素的实际效果会被缩放，导致和vw单位的元素尺寸不匹配，以下是两种适配方案：

方案1：CSS变量+JS动态适配（推荐，适配vw场景） #

第一步：修改SVG代码，绑定CSS变量 #

<svg style="visibility: hidden;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round" filterUnits="userSpaceOnUse">
            <feGaussianBlur in="SourceGraphic" stdDeviation="var(--std-deviation, 15)" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

第二步：添加动态计算逻辑 #

你原来的stdDeviation=15是1920px宽度HD屏（dpr=1）下的效果，对应vw值为15 / 1920 * 100 = 0.78125vw，添加以下JS代码即可适配任意分辨率：

function setStdDeviation() {
  // 0.78125是15px对应1920px视口的vw值，可根据你实际需要的圆角大小调整
  const baseVw = 0.78125;
  const vwToPx = window.innerWidth / 100;
  // 乘以devicePixelRatio抵消高DPI缩放影响
  const stdVal = (baseVw * vwToPx) * window.devicePixelRatio;
  document.documentElement.style.setProperty('--std-deviation', stdVal);
}
// 初始化和窗口大小变化时重新计算
window.addEventListener('resize', setStdDeviation);
setStdDeviation();

方案2：纯SVG相对单位适配（无JS） #

如果你不想引入JS，可以把滤镜单位改成相对元素尺寸的模式，调整参数适配vw：

<svg style="visibility: hidden;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
            <!-- 0.02为相对元素尺寸的模糊值，可根据需要调整大小 -->
            <feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur" />    
            <!-- 颜色矩阵参数同步调整适配相对单位 -->
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -8" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

注意：该方案需要根据你的元素实际尺寸微调stdDeviation和颜色矩阵的最后两个参数，直到圆角大小符合预期

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