svg - SVG 蒙版不适用于多个变换

Question

我有几个头像框架（在圆桌周围的椅子上），我在反应中动态生成。我正在尝试将 a 添加clip-path到框架中，这将根据框架的形状剪辑图像。

我在下面为其中一个帧提供了（生成的）代码，即使剪辑区域正好落在图像上（使用 chrome 的检查器检查），它似乎也不起作用。我已经尝试使用剪辑路径和蒙版（包含在下面的代码中）来剪辑/屏蔽它。如果有人能解释为什么这不起作用，那就太好了？

<svg viewBox="0 0 2000 2000">
  <g class="avatar_container">
    <defs>
      <symbol id="avatarFrame" viewBox="-12 -8 135 135">
        <path d="M55.5 121.217l8.313-11.856A50.55 50.55 0 00106.049 59.5 50.55 50.55 0 0055.5 8.951 50.55 50.55 0 004.951 59.5a50.55 50.55 0 0042.237 49.861z"></path>
      </symbol>
      <use id="frame-def" xlink:href="#avatarFrame" x="0" y="0" width="100" height="100"></use>
      <mask id="frame-mask" x="0" y="0" width="2200" height="2200">
        <rect x="0" y="0" width="2200" height="2200" fill="#000"></rect>
        <use x="1067.525" y="100" transform="rotate(315,1117.525,400)" xlink:href="#frame-def" fill="#fff"></use>
      </mask>
      <clipPath id="frame-clip">
        <use x="1067.525" y="100" transform="rotate(315,1117.525,400)" xlink:href="#frame-def"></use>
      </clipPath>
    </defs>
    <g class="avatar" transform="rotate(315,1117.525,400)" mask="url(#frame-mask)">
      <image xlink:href="https://via.placeholder.com/100" x="1067.525" y="100" transform="rotate(-315,1117.525,150)" width="100" height="100"></image>
    </g>
    <use id="frame" class="avatar_frame" xlink:href="#frame-def" transform="rotate(315,1117.525,400)" x="1067.525" y="100" width="100" height="100" fill="none" stroke="#545454" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></use>
  </g>

标签： svgmask