如何将CSS波浪分隔符引用的外链SVG替换为内联SVG代码

不需要修改页面HTML结构，仅调整CSS代码即可实现完全一致的效果，核心是把外链SVG转为内联Data URI格式写入mask属性，彻底移除外部资源请求。

• 第一步：压缩拿到的SVG源码，移除所有换行、多余空白字符，将SVG内的双引号替换为单引号避免CSS语法冲突，再将SVG转为URL编码的Data URI格式
• 第二步：替换原有CSS中-webkit-mask-image引用的外链地址，同时补全标准无前缀的mask相关属性提升兼容性

section[data-section-id="62adfe4a705320199dc8f003"] {
  overflow:visible;

  .section-background {
      overflow:visible !important;
  }
  .section-background::before {
    content:"";
    position:absolute;
    transform:translateY(-90%);
    width:100%;
    height:20vh;
    background-color:inherit !important;
    /* 内联SVG替换原外链，无外部资源请求 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23000' fill-opacity='1' d='M0,288L60,250.7C120,213,240,139,360,138.7C480,139,600,213,720,250.7C840,288,960,288,1080,245.3C1200,203,1320,117,1380,74.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23000' fill-opacity='1' d='M0,288L60,250.7C120,213,240,139,360,138.7C480,139,600,213,720,250.7C840,288,960,288,1080,245.3C1200,203,1320,117,1380,74.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size:cover;
    mask-size:cover;
    -webkit-mask-repeat:no-repeat; 
    mask-repeat:no-repeat;
    @media screen and (max-width: 767px) {
      -webkit-mask-size: cover;
              mask-size: 100% 100%;
    }
  }
}

• 上述代码中把SVG的fill颜色改成了纯黑，因为mask遮罩只识别alpha透明度，填充色不影响最终显示的波浪形状和效果，和原外链的渲染效果完全一致
• 代码没有任何外部资源依赖，加载速度比引用外链更快，也不会出现外链资源失效导致波浪效果丢失的问题
• 保留了原有的所有定位、尺寸、响应式规则，不需要调整其他参数

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