Zastosuj metodę clipPath do przekształconego elementu g

Question

Próbuję przyciąć okrąg tak, aby był widoczny tylko dla części, która mieści się w określonych granicach. Koło znajduje się w obrębie elementu g, który jest transformowany. Kiedy zastosuję ścieżkę klipu do elementu g lub ścieżki w tym elemencie ("g.site" lub "ścieżka g.site"), okrąg zostanie kompletnie odcięty. Krótki przykład pokazujący mój 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> 

Demo pracy mojego problemu można znaleźć w tym skrzypce: http://jsfiddle.net/xRh6A/

Dodałem dwa okręgi. Pierwszy jest obcięty (ponieważ ustawiony jest atrybut clip-path), drugi jest pokazywany, ale (oczywiście) nie jest obcięty.

Przypuszczam, że jest to związane z faktem, że ścieżka klipu jest zdefiniowana w wartościach bezwzględnych, gdy element okręgu ma lokalne współrzędne, a następnie jest transformowany. Czy mogę użyć opcji clipPath z przekształconą grupą, czy też trzeba zmienić ścieżkę klipu lub ścieżkę koła, aby pasowały do ​​siebie?

Edytuj Rozwiązałem go, umieszczając "strony" z absolutnymi współrzędnymi. Jednakże oznaczało to, że nie mogłem użyć d3.svg.arc (który generuje kod w uproszczonym przykładzie I), ponieważ tworzy on łuki w lokalnym układzie współrzędnych.

Nadal chciałbym sprawdzić, czy można go rozwiązać inaczej.

Answer 1

Twoje tłumaczenie na element g wpływa na renderowanie clipPath. Dostępne są dwie opcje:

1. Dodaj atrybut clip-path do statycznego elementu nadrzędnego. Następnie możesz zastosować tłumaczenie na elemencie podrzędnym, bez wpływu na renderowanie clipPath.

2. Zastosuj odwrotne tłumaczenie na elemencie clipPath. (Uwaga: Nigdy realizowany tej metody, ale czytałem o tym tutaj: https://stackoverflow.com/a/16166249/3123187)

wolę opcję nr 1, bo nie trzeba zmieniać clipPath tranform za każdym razem zmienić g przekształcać . W twoim przypadku masz już element nadrzędny g, więc możesz dodać atrybut clip-path, jeśli chcesz zastosować clipPath, aby zastosować go do każdego elementu w twoim elemencie "g # sites".

<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/)

Jeśli tylko zamiar do tego clipPath być stosowane do pierwszego kręgu, można po prostu dodać pośredniego elementu kontenera.

<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/)