如何将SVG自定义三角形形状作为蒙版应用到SVG内嵌图片上

问题根源 #

• 蒙版填充逻辑错误：SVG蒙版默认按元素亮度计算透明度，白色填充区域对应下层内容完全显示，黑色填充区域对应下层内容完全透明隐藏，你原有路径填充为黑色，即使正常加载也会得到完全透明的遮罩效果。
• 蒙版内无有效形状：你写在<mask id="mask11">内部的三角形路径被整段注释，蒙版为空，不具备裁剪能力。
• 绑定与语法错误：未给<image>标签添加mask="url(#mask11)"属性关联蒙版；同时在SVG内部使用了JS风格的//注释，SVG为XML语法，仅支持<!-- -->格式注释，非法注释会导致解析异常。
• 尺寸坐标不匹配：三角形路径的原始坐标基于209×143的视口计算，直接放入viewBox="0 0 300 300"的SVG中会出现位置偏移、大小不符的问题。

可直接使用的实现代码 #

<div class="clipSvg2">
  <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="mask11">
        <!-- 路径填充白色，调整transform属性可修改三角形的位置、大小 -->
        <path 
          transform="translate(45.5, 78.5) scale(1.4)" 
          fill="white" 
          fill-rule="evenodd" 
          clip-rule="evenodd" 
          d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
        />
      </mask>
    </defs>
    <!-- 绑定蒙版，引入的图片支持GIF格式，遮罩不会影响GIF动效播放 -->
    <image 
      width="100%" 
      height="100%" 
      mask="url(#mask11)"
      href="替换为你的图片/GIF地址"
    />
  </svg>
</div>

适配提示 #

• 如需调整三角形的位置、大小，直接修改path标签上transform属性的位移、缩放参数即可，无需改动原始路径坐标。
• 如果不需要三角形的内描边空心效果，可以直接使用适配300×300视口的简化路径，代码更精简：

  <path d="M150 0 L0 300 L300 300 Z" fill="white"/>
  

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