Apply clipPath to transformed g element

Question

I am trying to pin a circle so that it is displayed only for the part that falls within certain boundaries. However, the circle is inside the g-element that is being transformed. When I apply the clip path to the g element or to the path inside this element ("g.site" or "g.site path"), the circle ends, is cut off. Short description of the problem:

<svg width="600" height="600"> <defs> <clipPath id="myClip"> <path d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z" /> </clipPath> </defs> <g id="voronoi"> <g id="cells"> <path class="cell" d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z" /> </g> <g id="sites"> <g class="site" transform="translate(483.29548177370367,267.14072835257724)" clip-path="url(#myClip)"> <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> </g> <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> </g> </g> </g> </svg> 

In this script you can find a working demo of my problem: http://jsfiddle.net/xRh6A/

I added two circles. The first one is cropped (because the clip-path attribute is set), the second is displayed, but (obviously) is not cropped.

I believe that this is due to the fact that the clip path is defined in absolute terms, while the circle element has local coordinates and is then converted. Can I use clipPath with the converted group, or do I need to either change the clip path or the circle path so that they match?

Edit I decided this by placing "sites" with absolute coordinates. However, this meant that I could not use d3.svg.arc (which generates the code in the simplified example that I attached), since it creates arcs in the local coordinate system.

I would still be interested to know if it can be solved otherwise.

Answer 1

Your translation in the g element affects the way clipPath . You have 2 options:

• Add the clip-path attribute to the static parent element. You can then apply your translation to the child without affecting clipPath rendering.

• Apply reverse translation to clipPath element. (Note: I have never applied this method, but I read about it here: https://stackoverflow.com/a/166778/ )

I prefer option # 1 because I don’t need to change the tranform clipPath every time I change the transformation g . In your case, you already have the parent element g , so you can add the clip-path attribute there if you intend to apply clipPath to apply "g # sites" to each element of your element.

 <g id="sites" clip-path="url(#myClip)"> <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> </g> <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> </g> </g> 

(jsfiddle: http://jsfiddle.net/SWyeD/ )

If you only plan on using this clipPath for the first lap, you simply add an intermediate container element.

 <g id="sites"> <g clip-path="url(#myClip)"> <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> </g> </g> <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> </g> </g> 

(jsfiddle: http://jsfiddle.net/bdB65/ )