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，所以我有一个黑色矩形，那个形状就像一个洞。我想通过设置clip-rule =“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>

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

1 个答案: