我该如何正确使用clip-rule =“evenodd”，这样我就可以从另一个形状中切出一个形状？

Question

这是我的代码：

<svg style="position: absolute; z-index: 100;" width="100%" height="100%" 
     viewPort="0 0 1000 1000" version="1.1" 
     xmlns="http://www.w3.org/2000/svg"> 
     <defs> 
      <clipPath id="elroyclip"> 
      <path clip-rule="evenodd" d="M54.621,44.397V60.23h15.434v7.456H47.66V44.397H27.99v23.289H5.594V60.23h15.443V44.397H0v-3.819C0,18.198,16.965,0,37.826,0c20.863,0,37.828,18.198,37.828,40.578v3.819H54.621z"/> 
      </clipPath> 
     </defs> 
      <rect x="0" y="0" width="2000" height="2000" fill="#000000" clip-path="url(#elroyclip)"/> 
    </svg> 

这里的小提琴：http://jsfiddle.net/PsP36/

我希望削减clippath出矩形的，所以我必须与形状的孔的黑色矩形。我想通过设置剪辑规则=“evenodd”我可以实现这一点，但它不起作用。我不能使用面罩，我尝试过，但在我的使用情况下，它太慢了，而我的测试与修剪形状工作速度非常快。

Answer 1

您需要将clipPath设为您在一个方向上裁剪的形状，并在另一个方向上裁剪区域。

<svg style="position: absolute; z-index: 100;" width="100%" height="100%" 
    viewPort="0 0 1000 1000" version="1.1" 
    xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <clipPath id="elroyclip"> 
      <path clip-rule="evenodd" d="M0,0H2000V2000H-2000zM54.621,44.397V60.23h15.434v7.456H47.66V44.397H27.99v23.289H5.594V60.23h15.443V44.397H0v-3.819C0,18.198,16.965,0,37.826,0c20.863,0,37.828,18.198,37.828,40.578v3.819H54.621z"/> 
     </clipPath> 
    </defs> 
    <rect x="0" y="0" width="2000" height="2000" fill="#000000" clip-path="url(#elroyclip)"/> 
</svg>