使用 SVG Shapen 进行图像遮罩

如何解决使用 SVG Shapen 进行图像遮罩

我尝试了很多代码，但我无法用我的 SVG 形状掩盖它我不确定是我的形状问题还是代码问题

HTML

        <div class="banner">
            <div class="imagearea">
<svg>
      <defs>
       <mask id="maskHome" maskUnits="objectBoundingBox">
  <path id="Path_475" data-name="Path 475" d="M1172.467,599.6l17.558-22.785c16.862-22.349,22.338-31.236,22.556-47.2.228-22.556-18.232-39.429-42.623-39.429a50.965,50.965,0-13.2,1.929,288.486,44.137-153.3c0-160.258-130.089-290.337-290.347-290.337A289.868,289.868,620.188,338.818c0,.228.031.436.031.653-46.315,5.61-69.11,48.721-87.663,83.857-18.076,34.223-30.417,55.006-49.354,55.006s-31.288-20.783-49.364-55.006c-19.87-37.646-44.615-84.5-97.961-84.5s-78.06,46.854-97.92,84.51c-18.055,34.223-30.386,55-49.3,55s-31.267-20.772-49.323-55c-19.881-37.656-44.6-84.51-97.951-84.51v55.8c18.927,31.268,20.772,49.323,55,19.88,37.645,44.615,84.51,97.951,84.51s78.06-46.865,97.92-84.51c18.055-34.223,30.386-55,49.3-55,18.937,31.278,20.783,49.354,55.006,44.614,84.5,97.971,84.5s78.091-46.855,97.961-84.5c16.5-31.226,28.27-51.065,44.584-54.332,26.165,133.242,143.042,233.879,284.8,84.946,161.17-36.785,214.289-95.005,.083-.01.145-.01.228h32.366c-1.814-9.116,3.879-14.591,11.18-14.591,4.553,12.071,1.825,12.538,5.247-1.13,8.431-14.125,25.989l-52.662,70.666h100.761V599.6ZM910.546,487.782c-85.786,0-149.9-63.178-149.9-148.964s64.111-148.933,149.9-148.933c84.832,148.943,63.157,148.933S995.378,487.782,910.546,487.782Z" transform="translate(-41.382 -48.481)" fill="#000"/>
          </mask>
    </defs>
</svg>
    <img class="maskHome" src="https://cdn.pixabay.com/photo/2017/04/24/13/37/architecture-2256489_1280.jpg"
                    width="100%" height="100%" />
        </div>
        </div>

CSS

.maskHome {
            mask: url("#maskHome");
height: 200px;
            width: 200px;
        }

Codepan https://codepen.io/pagol/pen/PomGZdb