实现多个剪切路径相交的正确方法是什么? [英] What is the correct way to achieve intersection of multiple clip paths?

问题描述

如原始SVG 有一些剪切路径元素第16行，需要将其交叉并应用到矩形填充(第17行)以获取如下所示的内容:

As described in another post, I am trying to recreate an SVG from vector graphics commands in a PDF and I am facing some difficulty in the part where I need to intersect a set of clip paths. For instance, the raw SVG has a few clip path elements line #16 which need to be intersected and applied on the rectangle fill (line #17) to obtain what looks like this: .

我不清楚在SVG中实现多个剪辑路径的相交的正确和最佳方法.除了这一个，我在网上找不到关于此的更多信息，提出了此SVG ，在此我介绍了一系列尝试添加其他 clipPath 元素的方法将当前相交与要添加到相交集中的下一个原始 clipPath 相交.这种方法对我来说似乎很微不足道.此外，该SVG似乎无法在某些版本的Firefox(ESR 17.x)上运行，尽管它可以在Firefox 5，Chrome和IE上提供预期的结果. SVG出问题了吗?或者即使正确，是否有更简单/更好的方法来实现交叉?

I am not clear about the correct and the best way to achieve intersection of multiple clip paths in an SVG. I wasn't able to find much information about this on the web except this one, going by which I came up with this SVG where I introduce a sequence of additional clipPath elements which try to intersect the current intersection with the next original clipPath to be added to the intersection set. This approach seems rather inelegant to me. Besides, that SVG doesn't seem to work on some versions of Firefox (ESR 17.x) though it renders the expected result on Firefox 5, Chrome and IE. Is there something wrong with the SVG? Or even if it is correct, is there a simpler/better way to achieve the intersection?

推荐答案

您看到的方法是合理的.有一个 w3c示例在测试套件中.

The way you've done it seens reasonable. There's a w3c example in the testsuite.

这篇关于实现多个剪切路径相交的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！