SVG蒙版失效问题：绑定#myMask后mask完全不生效如何解决

问题原因 #

一共两个核心错误导致蒙版不生效：

• 蒙版尺寸设置错误
  你给<mask>标签设置了width="1" height="1"，同时指定了maskUnits="userSpaceOnUse"，这意味着蒙版的有效作用区域只有1x1像素，超出这个范围的区域都会被蒙版判定为完全透明，自然看不到任何被蒙版裁剪的效果。
  需要把mask的宽高改成和SVG viewBox匹配的尺寸：

<mask id="myMask" x="0" y="0" width="527.8" height="498.1" maskUnits="userSpaceOnUse">

• 目标元素坐标偏移出蒙版范围
  被蒙版作用的<g id="arrow">设置了transform="matrix(1, 0, 0, 1, 1190.697021, 194.369995)"，相当于把整个箭头组向右平移了1190像素，而你的SVG视口只有527.8像素宽，整个箭头完全位于蒙版的作用区域之外，自然既看不到箭头，也看不到蒙版效果。
  你需要调整箭头组的transform参数，或者调整蒙版的坐标，让两者的坐标范围重叠，才能看到蒙版裁剪后的效果。

验证效果 #

修改完上述两个参数后，白色描边路径形状的蒙版就会正常作用在箭头上，仅保留箭头和路径重叠的区域。

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