javascript - 如何隐藏SVG超出指定SVG的部分？

Question

我想隐藏超出白色眼球的虹膜和瞳孔部分。我已经尝试过 clipPath 但它没有按我想要的那样工作。

const leftPupil = document.getElementById("left-pupil");
const leftIris = document.getElementById("left-iris");

document.addEventListener("mousemove", function(e) {

  let x = e.clientX;
  let y = e.clientY;
  const pupilRect = leftPupil.getBoundingClientRect();
  const radius = 20;
  const angle = Math.atan2(y - pupilRect.top, x - pupilRect.left) + Math.PI;
  leftPupil.setAttribute('transform', `translate(${-radius*Math.cos(angle)},${-radius*Math.sin(angle)})`);
  leftIris.setAttribute('transform', `translate(${-radius*Math.cos(angle)},${-radius*Math.sin(angle)})`);
});

<svg id="face" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152.31 1075.95">
  <defs><style>.cls-1,.cls-10,.cls-2,.cls-9{fill:none;stroke:#fff;}.cls-1,.cls-10,.cls-11,.cls-2,.cls-9{stroke-miterlimit:10;}.cls-1,.cls-11,.cls-12,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill-rule:evenodd;}.cls-3{fill:#1a52db;}.cls-4{fill:#223992;}.cls-5{fill:#fff;}.cls-6{fill:#fd5219;}.cls-8{fill:#d63319;}.cls-10,.cls-9{stroke-width:2px;}.cls-11{fill:#feae00;stroke:#feae00;}.cls-12{fill:#f15a24;}</style>
  </defs>
  <g id="left-eye">
    <path id="left-blur" class="cls-6" d="M618.77,130.15a51.54,51.54,0,0,1,41.73-12c42.35,6.55,131.56,21,141.86,28,13.58,9.22,65,56.1,55.46,82.25s.29,74.29-1.5,91.87c-1.66,16.32-60,27.16-60,27.16s-64.65,14.43-109.17,29.46S622,325.8,607.51,304,538.65,249,564.09,198.16C579.12,168.12,602.3,144.48,618.77,130.15Z" transform="translate(-415.19 -6.14)"/>
    <path id="left-eye-shadow" class="cls-8" d="M699.34,251.49c4.14,0,10.51.16,18.28.54,24.22,1.2,36.33,1.79,49.57,6.48,12.9,4.57,22.85,10.15,26.64,14.1,1.76,1.84,14.86,12.09,24.75,20.7,3.9,3.39,5.91,8.31,15.42,10.69,4,1,3,9,0,9-4.79,0-14.7,1-18,3a172.81,172.81,0,0,1-34,14.46c-17.24,4.94-30.79,8.12-37.48,8.85-5.12.57-28.3,2.8-57.35-5-10.27-2.77-37.3-10.07-44.5-21.29-1.75-2.74-16.71-18.72-16.88-18.8-1.75-.78-5.25-4-5.63-6.82-.18-1.28.13-3.71,10.31-11.33a138.34,138.34,0,0,1,11.88-8l22-11Z" transform="translate(-415.19 -6.14)"/>
    <path id="left-white" class="cls-5" d="M626,288.2a4.6,4.6,0,0,0,1.4,3c5.73,6.09,26.18,28.7,46.41,34.32a228.21,228.21,0,0,0,48.8,8.12s32.21-2.36,49.31-8.5,34.19-12.28,39.36-15.45.4-13.29.4-13.29S788.13,270,765.4,261.78c-15.06-5.44-25-10.73-53.78-11.59-15-.45-38.06,4.59-56.21,13.28-11.35,5.44-20,13.24-25.94,19.18C626.71,285.4,626.08,286.72,626,288.2Z" transform="translate(-415.19 -6.14)"/>
    <g transform="translate(-415.19 -6.14)">
      <path id="left-iris" class="cls-3" d="M676.54,281.74s7.91-29.74,39.16-37.39,47.08,28.14,47.08,28.14,1.62,18.56-2.78,27.65S747.38,322.89,738.26,325c-3.87.89-16.62,2.76-27.28-.82-14.45-4.86-27.27-16.13-29.63-19.59C677.14,298.4,676,287.94,676.54,281.74Z"/> 
      <path id="left-pupil" class="cls-7" d="M710.77,295.47c-3.51-5.52-5.1-13.7-3.19-16.35s7.64-9.7,13.15-9.54,17.26,3.21,18.82,14.89a2.11,2.11,0,0,1,0,.26c.1,1.13,1.14,9.85-2.22,12.44-5.64,4.35-13,3.22-13,3.22S713.2,299.3,710.77,295.47Z" />
    </g> 
  </g>
</svg>

Answer 1

为了得到clipPath要工作，您必须删除转换，它才能完美运行:

const leftPupil = document.getElementById("left-pupil");
const leftIris = document.getElementById("left-iris");

document.addEventListener("mousemove", function(e) {

  let x = e.clientX;
  let y = e.clientY;
  const pupilRect = leftPupil.getBoundingClientRect();
  const radius = 20;
  const angle = Math.atan2(y - pupilRect.top, x - pupilRect.left) + Math.PI;
  leftPupil.setAttribute('transform', `translate(${-radius*Math.cos(angle)},${-radius*Math.sin(angle)})`);
  leftIris.setAttribute('transform', `translate(${-radius*Math.cos(angle)},${-radius*Math.sin(angle)})`);
});

<svg id="face" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152.31 1075.95">
            <defs><style>.cls-1,.cls-10,.cls-2,.cls-9{fill:none;stroke:#fff;}.cls-1,.cls-10,.cls-11,.cls-2,.cls-9{stroke-miterlimit:10;}.cls-1,.cls-11,.cls-12,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill-rule:evenodd;}.cls-3{fill:#1a52db;}.cls-4{fill:#223992;}.cls-5{fill:#fff;}.cls-6{fill:#fd5219;}.cls-8{fill:#d63319;}.cls-10,.cls-9{stroke-width:2px;}.cls-11{fill:#feae00;stroke:#feae00;}.cls-12{fill:#f15a24;}
            </style>
  <clipPath id="mask">
           <path d="M626,288.2a4.6,4.6,0,0,0,1.4,3c5.73,6.09,26.18,28.7,46.41,34.32a228.21,228.21,0,0,0,48.8,8.12s32.21-2.36,49.31-8.5,34.19-12.28,39.36-15.45.4-13.29.4-13.29S788.13,270,765.4,261.78c-15.06-5.44-25-10.73-53.78-11.59-15-.45-38.06,4.59-56.21,13.28-11.35,5.44-20,13.24-25.94,19.18C626.71,285.4,626.08,286.72,626,288.2Z" />
 </clipPath>
        </defs>
                <g id="left-eye">
                    <path id="left-blur" class="cls-6" d="M618.77,130.15a51.54,51.54,0,0,1,41.73-12c42.35,6.55,131.56,21,141.86,28,13.58,9.22,65,56.1,55.46,82.25s.29,74.29-1.5,91.87c-1.66,16.32-60,27.16-60,27.16s-64.65,14.43-109.17,29.46S622,325.8,607.51,304,538.65,249,564.09,198.16C579.12,168.12,602.3,144.48,618.77,130.15Z" transform="translate(-415.19 -6.14)"/>
                    <path id="left-eye-shadow" class="cls-8" d="M699.34,251.49c4.14,0,10.51.16,18.28.54,24.22,1.2,36.33,1.79,49.57,6.48,12.9,4.57,22.85,10.15,26.64,14.1,1.76,1.84,14.86,12.09,24.75,20.7,3.9,3.39,5.91,8.31,15.42,10.69,4,1,3,9,0,9-4.79,0-14.7,1-18,3a172.81,172.81,0,0,1-34,14.46c-17.24,4.94-30.79,8.12-37.48,8.85-5.12.57-28.3,2.8-57.35-5-10.27-2.77-37.3-10.07-44.5-21.29-1.75-2.74-16.71-18.72-16.88-18.8-1.75-.78-5.25-4-5.63-6.82-.18-1.28.13-3.71,10.31-11.33a138.34,138.34,0,0,1,11.88-8l22-11Z" transform="translate(-415.19 -6.14)"/> 
                    
                        <path id="left-white" class="cls-5" d="M626,288.2a4.6,4.6,0,0,0,1.4,3c5.73,6.09,26.18,28.7,46.41,34.32a228.21,228.21,0,0,0,48.8,8.12s32.21-2.36,49.31-8.5,34.19-12.28,39.36-15.45.4-13.29.4-13.29S788.13,270,765.4,261.78c-15.06-5.44-25-10.73-53.78-11.59-15-.45-38.06,4.59-56.21,13.28-11.35,5.44-20,13.24-25.94,19.18C626.71,285.4,626.08,286.72,626,288.2Z" transform="translate(-415.19 -6.14)"/>
                        <g transform="translate(-415.19 -6.14)" clip-path="url(#mask)">
                        <path id="left-iris" class="cls-3" d="M676.54,281.74s7.91-29.74,39.16-37.39,47.08,28.14,47.08,28.14,1.62,18.56-2.78,27.65S747.38,322.89,738.26,325c-3.87.89-16.62,2.76-27.28-.82-14.45-4.86-27.27-16.13-29.63-19.59C677.14,298.4,676,287.94,676.54,281.74Z"/> 
                        <path id="left-pupil" class="cls-7" d="M710.77,295.47c-3.51-5.52-5.1-13.7-3.19-16.35s7.64-9.7,13.15-9.54,17.26,3.21,18.82,14.89a2.11,2.11,0,0,1,0,.26c.1,1.13,1.14,9.85-2.22,12.44-5.64,4.35-13,3.22-13,3.22S713.2,299.3,710.77,295.47Z" />
                        </g> 
                </g>
              </svg>

我看到你直接悬停在眼球上会发疯，你可以引用我十年前自己的问题，如何解决这个问题:
How to constrain movement within the area of a circle