14

特定の境界内にある部分のみが表示されるように、円をクリップしようとしています。ただし、円は変換される ag 要素内にあります。クリップ パスを 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つの円を追加しました。最初のものは切り取られています (clip-path 属性が設定されているため)。2 つ目は表示されていますが (明らかに) 切り取られていません。

これは、円要素がローカル座標を持ってから変換されるのに対し、クリップパスが絶対用語で定義されるという事実に関連していると思います。変換されたグループで clipPath を使用できますか? または、それらを一致させるためにクリップ パスまたはサークル パスを変更する必要がありますか?

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

それ以外の方法でも解決できるかどうか、私はまだ興味があります。

4

1 に答える 1

18

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

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

  2. 要素に逆変換を適用しclipPathます。私はこのメソッドを実装したことはありませんが、ここでそれについて読みました: https://stackoverflow.com/a/16166249/3123187。clipPathこのオプションでは、変換を変更するたびに変換を更新する必要がありますg。

あなたの場合、すでに親要素があるので、要素内のすべての要素に適用する場合は、そこに属性gを追加できます。clip-pathclipPathg#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/ )

それを最初の円にのみ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/ )

于 2014-05-14T15:36:00.983 に答える