円をクリップして、特定の範囲内にある部分のみを表示します。しかし、円は変形されたg要素内にあります。 g要素またはこの要素内のパス(「g.site」または「g.siteパス」)にクリップパスを適用すると、円の完成が切り捨てられます。ショートの例では、私の問題を示す:変換されたg要素にclipPathを適用する
<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(これは簡単な例ではコードを生成しています)を使用できないことを意味していました。
私はまだそれがそうでなければ解決することができるかどうか見ることに興味があるでしょう。
これが私のために働きました –