SVGの画像の一部を非表示にする

Question

SVGに画像を添付しました。 私の要件は、境界の外に出る画像の一部を隠したいと思うことです。 イメージの一部が1または500を超える場合、それは隠されるはずです。

これはCSSを使って、またはSVGのviewBox属性を使って行うことができますが、私はこれを行う方法を知らないと思います。

これは私のhttp://jsfiddle.net/zeajrgdr/72/のリンクです。
これは私がイメージを追加するボタン「画像を追加」に画像

var pathPlot = d3.selectAll("g." + "fp-pathplot-1419951398667"); 
     var image = d3.selectAll('#floor-image'); 
     if (image != null) { 
     image.remove(); 
     removeAllImageSelectors(); 
     } 
     var img = pathPlot.append("svg:image") 
     .attr('x', 100) 
     .attr('y', 100) 
     .attr('width', 196) 
     .attr('height', 98) 
     .attr('id', 'floor-image') 
     .attr('preserveAspectRatio', 'defer') 
     .attr("xlink:href", "http://s12.postimg.org/wm0u4pgf1/Rotate_Img_AS2.png") 

クリックを付加する方法です。この画像をマウスでドラッグして回転させることができます。おかげさまで

Answer 1

@thisOneGuyと同様、クリップパスが必要です。

 <defs> 
      <clipPath id="my-clip" transform="translate(100,100)"> 
       <rect width="363" height="360" x="0" y="0" ></rect> 
      </clipPath> 
     </defs> 

そして、あなたがクリップした（またはそのコンテナ）を必要とするすべての要素に適用されます：右SVGタグの後にその宣言を追加します

<g class="map-layers" width="363" height="360" x="0" y="0" 
    clip-path="url(#my-clip)"> 

はfiddle