这是我的代码：
<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/
我想从矩形中剪切出该剪切路径，所以我有一个带有该形状的黑色矩形作为孔。我认为通过设置clip-rule =“ evenodd”我可以实现这一点，但是它不起作用。我不能使用遮罩，但我尝试过，但是在我的用例中，它太慢了，而剪切形状的测试却非常快。
您需要将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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句