我該如何正確使用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>