SVG能否实现类似Canvas的响应式渐变裁剪边缘效果？

当然可以在SVG里实现这种响应式的渐变边缘裁剪效果，而且完全不用像你担心的那样搞复杂的多渐变方案，用<mask>就能轻松搞定，比Canvas实现还简洁不少～

核心思路：用<mask>替代<clipPath> #

SVG的<clipPath>只能实现硬边缘的裁剪，但<mask>支持透明度渐变，正好能模拟你要的Canvas式渐变边缘效果，而且天然支持响应式适配。

完整代码示例 #

下面是修改后的SVG代码，实现了响应式的渐变边缘裁剪：

<?xml version='1.0' standalone='no'?>
<svg version='1.1' viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <!-- 背景底图 -->
  <image href='https://i.postimg.cc/hvH4yn2Q/map.jpg' width="100%" height="100%" />
  
  <!-- 定义渐变遮罩：实现中心完全显示、边缘渐变透明的效果 -->
  <mask id="gradientClipMask">
    <!-- 可选1：线性渐变（从左上角到右下角的边缘渐变） -->
    <linearGradient id="edgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="white" stop-opacity="1" />
      <stop offset="12%" stop-color="white" stop-opacity="1" />
      <stop offset="88%" stop-color="white" stop-opacity="0" />
      <stop offset="100%" stop-color="white" stop-opacity="0" />
    </linearGradient>
    
    <!-- 可选2：径向渐变（从中心向外围的边缘渐变，效果更均匀） -->
    <!-- <radialGradient id="edgeGradient" cx="50%" cy="50%" r="50%">
      <stop offset="85%" stop-color="white" stop-opacity="1" />
      <stop offset="100%" stop-color="white" stop-opacity="0" />
    </radialGradient> -->
    
    <!-- 响应式遮罩矩形：占满整个SVG视口，随容器缩放自适应 -->
    <rect width="100%" height="100%" fill="url(#edgeGradient)" />
  </mask>
  
  <!-- 应用遮罩的主图：只显示遮罩中白色（完全不透明）的区域，边缘渐变透明 -->
  <image href='https://i.postimg.cc/hvH4yn2Q/map.jpg' width="100%" height="100%" mask="url(#gradientClipMask)" />
</svg>

关键细节说明 #

• 渐变参数调整：你可以修改渐变里的offset和stop-opacity值，来控制渐变边缘的宽度和过渡强度。比如把12%改成20%，渐变边缘就会更宽。
• 响应式适配：通过给SVG设置viewBox和preserveAspectRatio属性，再配合遮罩矩形的百分比尺寸，不管SVG容器怎么缩放，渐变边缘都会自动适配，完全满足你的响应式需求。
• 自定义边缘效果：如果需要四个边单独的渐变（比如上下边缘渐变，左右保持硬边），可以用多个线性渐变叠加，或者用<path>绘制带渐变的区域，操作起来也很灵活。

这种方案的优势在于纯SVG实现，不需要写JS逻辑，缩放时不会失真，比Canvas的渐变裁剪实现成本低很多～

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