SVG - イメージを円にトリミングする方法は？

Question

私はSVGのノブの方ですが、私はD3で遊んできましたし、基礎を失い始めました。

私が達成しようとしているのは、四角いイメージを取り、円に切り取ることです。これは、描画しようとしているツリー上のノードを表すことになります。

私はこの効果を、イメージごとにパターンを作成してから、パターンでノードを埋めることで達成できました。しかし、このアプローチのパフォーマンスは、ツリー上に一握り以上のノードがある場合にはひどいものでした。

私は別のアプローチを探しています。私は通常の「イメージ」オブジェクトを自分のノードとして配置することができますが、明らかに単純な四角形で表示され、円としてレンダリングしたいのです。誰でも、パフォーマンスを維持しながら、私が望む効果を達成するためにイメージをマスク/トリミングする方法についてアドバイスをしていますか？

Answer 1

あなたがクリップパスを使用することができ、like so：

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

円は四角形から「切り出す」になります。

Answer 2

あなたがプログラムで D3と@トーマスの答えと同じ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)");