使用clipPath与path实现SVG瞳孔在眼眶内渲染的问题排查

问题描述 #

我尝试使用path和clipPath属性让SVG元素在另一SVG元素范围内渲染，具体是让角色的瞳孔仅显示在眼眶内，不与脸部重叠（睫毛层级暂不考虑）。我制作了渲染角色的基础HTML和动画JS脚本，但当前左眼的裁剪效果未达到预期，瞳孔无法正确显示在眼眶内。

初始左眼元素代码 #

<svg>
    <defs>
        <clipPath id="playerEye">
            <use href="head_eye_left_eye.svg" x="1.375" y="-3.75"/>
        </clipPath>
    </defs>
    <g clip-path="url(#playerEye)">
        <image href="head_base_eye_pupil.svg" x="2.75" y="-3.15"/>
    </g>
</svg>

编辑1：附件SVG文件代码 #

head_eye_left_eye.svg 代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2.3606" height="2.3835" viewBox="0,0,2.3606,2.3835"><g transform="translate(-238.8197,-178.80825)"><g data-paper-data="{"isPaintingLayer":true}" fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="0.17188" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><path d="M240.63876,179.37458c0.09738,0.11448 0.50537,0.83662 0.54154,1.66652c-0.14569,0.05271 -0.65951,0.14623 -1.04444,0.15053c-0.38492,0.0043 -1.02062,-0.10631 -1.02062,-0.10631c0,0 -0.28086,-0.28131 -0.29503,-0.93228c-0.01262,-0.58006 0.20675,-1.32053 0.72654,-1.34332c0.37115,-0.01629 0.69565,0.09897 1.09199,0.56486z" data-paper-data="{"index":null}"/></g></g></svg><!--rotationCenter:1.1803017583988549:1.1917483799131503-->

head_base_eye_pupil.svg 代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0.95959" height="1.83311" viewBox="0,0,0.95959,1.83311"><g transform="translate(-239.5202,-179.08344)"><g data-paper-data="{"isPaintingLayer":true}" fill-rule="nonzero" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><g><path d="M239.52021,180c0,-0.50619 0.21482,-0.91655 0.47979,-0.91655c0.26498,0 0.4798,0.41035 0.4798,0.91655c0,0.50619 -0.21483,0.91656 -0.4798,0.91656c-0.26497,0 -0.47979,-0.41036 -0.47979,-0.91656z" fill="#008ae6" stroke-width="0"/><path d="M240.00132,179.43809c0.05706,-0.00482 0.11033,0.04569 0.15018,0.13118c0.03995,0.08547 0.06646,0.20592 0.07023,0.34099c0.00364,0.13513 -0.01619,0.2595 -0.05116,0.35133c-0.03506,0.09181 -0.08521,0.15109 -0.14227,0.1559c-0.05706,0.00482 -0.11034,-0.04569 -0.15018,-0.13116c-0.03995,-0.08547 -0.06647,-0.20592 -0.07013,-0.34096c-0.00375,-0.13515 0.01609,-0.2595 0.05102,-0.35133c0.03506,-0.09181 0.08528,-0.15099 0.14228,-0.1559z" fill="#000000" stroke-width="0.0278"/><path d="M240.00662,179.32694c0.03231,-0.06809 0.07784,-0.11136 0.12872,-0.11349c0.05091,-0.00213 0.09774,0.03733 0.13214,0.10263c0.03455,0.06531 0.05665,0.15651 0.05821,0.25809c0.00168,0.10173 -0.01754,0.19466 -0.04999,0.26274c-0.03231,0.0681 -0.07785,0.11138 -0.12873,0.11351c-0.05091,0.00213 -0.09773,-0.03731 -0.13213,-0.10263c-0.03455,-0.06531 -0.05665,-0.15651 -0.05821,-0.25809c-0.00168,-0.10173 0.01754,-0.19466 0.04999,-0.26274z" fill="#ffffff" stroke-width="0.01811"/></g></g></g></svg><!--rotationCenter:0.47979499999999575:0.9165549999999882-->

编辑2：修改后的代码（仍未解决问题） #

当前角色SVG文件代码 #

<image href="head_eye_left_eye.svg" x="1.375" y="-3.75"/>
<image href="head_base_eye_pupil.svg" x="2.75" y="-3.15" opacity=".5"/>
<svg>
    <defs>
        <clipPath id="clipEyeLeft">
            <use href="head_eye_left_eye.svg#eyeLeft" x="1.375" y="-3.75"/>
        </clipPath>
    </defs>
    <g clip-path="url(#clipEyeLeft)">
        <image href="head_base_eye_pupil.svg" x="2.75" y="-3.15"/>
    </g>
</svg>
<image href="head_eye_left_lash.svg" x="0" y="-3.75"/>

注：第二个<image>是瞳孔预期位置的占位符。

修改后的head_eye_left_eye.svg代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2.3606" height="2.3835" viewBox="0,0,2.3606,2.3835">
  <defs>
    <clipPath id="eyeLeft">
      <path d="M 4 45 c -19 -64 44 -54 43 -2 c -14 8 -32 7 -43 2 z"/>
    </clipPath>
  </defs>
  <g transform="translate(-238.8197,-178.80825)">
    <g data-paper-data="{"isPaintingLayer":true}" fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="0.17188" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal">
      <path d="M240.63876,179.37458c0.09738,0.11448 0.50537,0.83662 0.54154,1.66652c-0.14569,0.05271 -0.65951,0.14623 -1.04444,0.15053c-0.38492,0.0043 -1.02062,-0.10631 -1.02062,-0.10631c0,0 -0.28086,-0.28131 -0.29503,-0.93228c-0.01262,-0.58006 0.20675,-1.32053 0.72654,-1.34332c0.37115,-0.01629 0.69565,0.09897 1.09199,0.56486z" data-paper-data="{"index":null}"/>
    </g>
  </g>
</svg>

疑问 #

请问当前代码是否存在错误？能否通过SVG属性实现瞳孔仅在眼眶内显示的效果？

内容的提问来源于stack exchange，提问作者Emmanuel Exiga