Html 在SVG图像中隐藏图像边界外的部分

我已经在SVG中添加了一个图像。 我的要求是，我想隐藏图像超出边界的部分。 因此，如果我的图像的某些部分超过1或500，它应该被隐藏

我认为这可以使用CSS或SVG的viewBox属性来实现，但我不知道如何实现

这是我的链接。
这就是我附加图像的方式

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

单击“添加图像”按钮添加图像。您可以通过鼠标拖动、旋转此图像。

---

谢谢。

就像@thisonegoy说的，你需要一个剪辑路径。在svg标记后面添加其声明：

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

然后应用于所有需要剪裁的元素（或其容器）：

---

参见

如@thisonegoy所说，您需要一个剪辑路径。在svg标记后面添加其声明：

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

然后应用于所有需要剪裁的元素（或其容器）：

---

请参见

附加图像时仅添加剪辑路径：附加图像时仅添加剪辑路径：