SVG 剪辑“随你”

Posted 2023-03-23

【中文标题】SVG 剪辑“随你”

【英文标题】：SVG clipping "as you go"

【发布时间】：2020-09-24 11:55:51

【问题描述】：

在 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"   preserveAspectRatio="xMidYMid meet"
    viewBox="0.000000 0.000000 2678.000000 1600.000000">
    <g clip-path="EEE">
        <clipPath id="EEE"> <rect x="40" y="40"  /> </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 处结束...

【问题讨论】：

在组上设置剪裁，将要剪裁的形状放在组元素中。

谢谢罗伯特，你能给我一个关于组内剪辑的简单小例子吗？我找不到任何明确的例子......

之前是否定义了剪辑路径“whatever”？如果是这样，这就是我试图避免的。在编写文件的开头时，我不知道所需的所有剪辑。直到我走到最后……

不需要。您可以将 clipPath 元素放在剪辑路径引用之后。试试看。

【参考方案1】：

哎呀。想我已经到了。

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"   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"  /> 
        </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 推动我朝着正确的方向前进。