Created attachment 84573 [details] Test case which should show 4 squares When a group with visibility:hidden style contains a g node or a use node with a clip-path, and that group is on top of another group with the same clip-path in the same position, the bottom group is also invisible. Changing the visibility of the top group makes the bottom group visible. Changing it back to hidden makes it invisible again. However, manipulating the bottom group in the DOM (e.g. changing the clip-path away and back again) makes it visible, and it remains visible, even if the top group visibility is flipped. Expected result of attachment: 4 black squares across the top of the screen. Actual result: 2 black squares show up, cases c and d. Description of the cases: a. clipPath node inside the second group, which has visibility:hidden. Not sure if this is legal SVG, but if it isn't, then the first group should render. b. A group in the defs section contains the clipPath and a group that is clipped. This is used in two groups, the second of which is visibilty:hidden. c. Similar group in the defs section, but only the clipped group is used. This one works. d. clipPath and two groups defined as siblings. Groups are clipped directly. Second group is visibility:hidden. This also works. It seems like case a might be incorrect SVG. Certainly c is very similar to b and works, so this is a suitable work-around for me, but b ought to work. (Tested on variety of WebKit versions, including r80210 nightly)
Your first example is not correct. From CSS Masking [1]: "If a child element is made invisible by display or visibility it does not contribute to the clipping path." That is exactly what happens if you put visibility: hidden (an inheritable property) on an ancestor of <clipPath>. All elements within the <clipPath> get hidden and <clipPath> has no clipping path. The element disappears completely. The other examples work correctly. [1] http://dev.w3.org/fxtf/css-masking-1/#elementdef-clippath