24

私はSVGに少し慣れていませんが、D3で遊んでいて、基本を理解し始めています。

私が達成しようとしているのは、正方形の画像を取り、それを円にトリミングすることです。これは、描画しようとしている木の上のノードを表します。

この効果は、画像ごとにパターンを作成し、ノードにパターンを塗りつぶすことで実現できました。ただし、ツリー上にノードが一握り以上ある場合、このアプローチのパフォーマンスはひどいものでした。

だから、私は別のアプローチを探しています。通常の「画像」オブジェクトをノードとして配置することはできますが、それらは明らかに単純な長方形として表示されるため、円としてレンダリングしたいと思います。パフォーマンスを維持しながら、希望する効果を実現するために画像をマスク/トリミングする方法について誰かアドバイスがありますか？

4

2 に答える 2

37

次のように、クリップ パスを使用できます。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <clipPath id="clipCircle">
    <circle r="50" cx="50" cy="50"/>
  </clipPath>
  <rect width="100" height="100" clip-path="url(#clipCircle)"/>
</svg>

長方形から円が「切り出され」ます。

于 2012-12-04T06:35:20.157 に答える
3

D3を使用してプログラムで@Thomasの回答と同じhtmlコードを生成する場合 は、次のことができます。

var svg = d3.select("body").append("svg")
  .attr("width", "100%")
  .attr("height", "100%");

svg.append("clipPath")
    .attr("id", "clipCircle")
  .append("circle")
    .attr("r", 50)
    .attr("cx", 50)
    .attr("cy", 50);

svg.append("rect")
    .attr("width", 100)
    .attr("height", 100)
    .attr("clip-path", "url(#clipCircle)");
于 2017-08-07T09:52:31.473 に答える