SVGプロットをクリップするには？

Question

私のSVG要素は、このようセットアップです：

svg.attr("viewBox", "0 0 " + chartView.displayWidth + " " + chartView.displayHeight); 

私はいくつかのプロットを描いてる内。そこに私のプロットを見ることができる "見る窓"を作成する方法はありますか？

私が使用してみました：

svg.append("clipPath").append("rect") 
        .attr("x", 10) 
        .attr("y", 10) 
        .attr("width", 50) 
        .attr("height", 100); 

をそれはすでにあなたがクリップ経路を使用することになり、コメントで述べた

Answer 1

としては動作しません。 appendを使用して既に作成しようとしました。私が知る限り、これはD3.jsまたはjQueryの構文です。しかし、あなたはsvg.jsとタグ付けしました。 svg.jsでは、このようにそれを行うだろう：あなたはD3.jsを使用している場合

svg.viewbox(0, 0, chartView.displayWidth, chartView.displayHeight); 

var plot = svg.path('your plots path data').stroke('#000') 

var clipper = svg.rect(50, 100).move(10, 10) 

// to clip the whole svg use svg instead of plot 
plot.clipWith(clipper) 

あなたはほとんどそこにあります。 すでにclippathを作成しています。あなたは今それにidを与えなければなりません、あなたのプロットでこのidを参照してください。

var clip = svg.append("clipPath").attr("id", "clipper"); 
clip.append("rect").attr("x", 10) 
        .attr("y", 10) 
        .attr("width", 50) 
        .attr("height", 100); 

yourplot.attr("clip-path", "url(#clipper)") 

あなたはSVG仕様または実行する方法のおかげで、@RobertLongson clipPaths