raphaeljs 和 freetransform 结合 clip-path答案

【问题标题】：raphaeljs and freetransform with the combination of clip-pathraphaeljs 和 freetransform 结合 clip-path
【发布时间】：2012-03-07 21:07:56
【问题描述】：

我正在使用 Raphael 和 Elberts FreeTransform 插件。这是我尝试过的MyWork

我的剪辑路径一直有效，直到我不平移或旋转矩形集，在旋转或平移后它停止正常工作。我想要路径边界内的那些矩形，一旦它们出去，它们就会消失。为什么我使用 javascript（手动）而不是 Raphael 作为剪辑路径的答案是，Raphael 仅支持剪辑 rect。我需要你的帮助来解决这个问题。

提前致谢

更新：1 My Work 2 我解决了平移情况，但在旋转情况下它仍然会干扰所有设置。

【问题讨论】：

标签： javascript svg raphael transform

【解决方案1】：

请检查这个小提琴http://jsfiddle.net/UGukL/

我已经尝试过剪辑的问题，但它不起作用。所以决定用面具工作。此外，我还没有实现用于平移和旋转的拖动但保持按钮。现在掩蔽对于旋转和平移都可以正常工作。

【讨论】：

谢谢亲爱的，辛苦了！你能解释一下遮罩和剪辑路径之间的区别吗？
蒙版的填充区域，暴露蒙版对象。而剪辑的行为相反。但两者都是非破坏性方式。
您好，您应用的掩码仅适用于 g 标签（组）。如果我将它与 rect 一起使用，它就不起作用
jsfiddle.net/UGukL/5 如果应用了 g 标签，则同样的事情适用于 clip-path，否则不会。这意味着 masking 和 clippath 在旋转情况下都有相同的问题。不能适用于单个元素，但适用于 g 标签，即组

【解决方案2】：

创建一个新的g 标签（组）并将所有元素移动到该组，然后将clip-path 应用于g 标签即可。如果应用于单个元素，ClipPath 无法识别元素属性的transform。所以它应该被包裹在g中。

It is applied Here

【讨论】：