変換されたg要素にclipPathを適用する

Question

円をクリップして、特定の範囲内にある部分のみを表示します。しかし、円は変形されたg要素内にあります。 g要素またはこの要素内のパス（「g.site」または「g.siteパス」）にクリップパスを適用すると、円の完成が切り捨てられます。ショートの例では、私の問題を示す：

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

私の問題の作業のデモは、このフィドルで見つけることができます：http://jsfiddle.net/xRh6A/

私は2つの円を追加しました。クリップパス属性が設定されているため、最初のクリップは切り捨てられ、2番目のクリップは表示されますが、クリップされません（明らかに）。

これは、clip-pathが絶対条件で定義され、circle要素がローカル座標を持ち、変換されているという事実に関係していると思います。変換されたグループでクリップパスを使用することはできますか、クリップパスまたは円パスを変更して一致させる必要がありますか？

編集「サイト」を絶対座標で配置して解決しました。しかし、これは、ローカル座標系で円弧を作成するため、d3.svg.arc（これは簡単な例ではコードを生成しています）を使用できないことを意味していました。

私はまだそれがそうでなければ解決することができるかどうか見ることに興味があるでしょう。

Answer 1

g要素の翻訳は、clipPathのレンダリング方法に影響しています。次の2つのオプションがあります。

1. 固定親要素にclip-path属性を追加します。その後、clipPathレンダリングに影響を与えることなく、子要素に翻訳を適用できます。

2. clipPath要素の逆変換を適用します。 （注：私は、このメソッドを実装したことがありませんが、私はここでそれについて読む：https://stackoverflow.com/a/16166249/3123187）

私はg変換を変更clipPath tranformするたびに変更する必要はありませんので、私はオプション＃1を好みます。あなたの場合、すでにgという親要素がありますので、clipPathを 'g＃sites'要素のすべての要素に適用する場合は、clip-path属性を追加できます。

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

そのclipPathが最初の円に適用するためにあなただけの予定がある場合は、あなただけの中間のコンテナ要素を追加したいです。

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