SVG剪裁 "随心所欲"

Question

在Windows API和PostScript语言中，你可以在任何一点上设置剪裁。

一个虚幻但简单的例子。

a) 我画了一个圆

b)然后我设置了一个剪切矩形。

c) 然后我再画一个圆。

d)然后我删除剪裁。

我找不到用SVG做这个的方法。我可能遗漏了什么，而且我找不到一个可以帮助我的例子。

我想在文件中使用的所有剪切矩形窗口都必须在一开始就设置好吗？

我试过这样做。

    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" width="2678.000" height="1600.000" preserveAspectRatio="xMidYMid meet"
    viewBox="0.000000 0.000000 2678.000000 1600.000000">
    <g clip-path="EEE">
        <clipPath id="EEE"> <rect x="40" y="40" width="1000" height="1000"/> </clipPath>
        <polyline style="stroke:#FF5F42;stroke-width:4;fill:none;"  points="0,0  2000,1500  "/>
        <polyline style="stroke:#FF5F42;stroke-width:4;fill:none;"  points="0,0  500,500  "/>
        <polyline style="stroke:#00FF00;stroke-width:4;fill:none;"  points="0,0  250,250  "/>
        <text x="284" y="1365" style="text-anchor:start;dominant-baseline:hanging;font-size:36.0px;"> Flux 5300.00  lm</text>
    </g>
</svg>

...但是我还是能看到应该被剪掉的文字。它在1365处，而剪切矩形在1040处结束。

Answer 1

Ooooops。我想我已经到了那里。

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" width="2678.000" height="1600.000" preserveAspectRatio="xMidYMid meet"
    viewBox="0.000000 0.000000 2678.000000 1600.000000">
    <defs>
    </defs>
    <g clip-path="url(#EEE)">
        <clipPath id="EEE">
            <rect x="0" y="140" width="1000" height="800"/> 
        </clipPath>
        <polyline style="stroke:#FF5F42;stroke-width:4;fill:none;"  points="0,0  2000,1500  "/>
        <polyline style="stroke:#FF5F42;stroke-width:4;fill:none;"  points="0,0  500,500  "/>
        <polyline style="stroke:#00FF00;stroke-width:4;fill:none;"  points="0,0  150,1250  "/>
        <text x="284" y="1365" style="text-anchor:start;dominant-baseline:hanging;font-size:36.0px;"> Flux 5300.00  lm</text>
    </g>
</svg>

我的第一个错误是认为我必须在使用它之前定义一些东西。看看我在上面定义EEE之前是怎么使用的......

我的第二个错误是不明白如何使用 "url(...) "啊。

感谢Robert Logson在正确的方向上对我的指点。