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

点击“添加图片”＆＃39;按钮添加图像。您可以通过鼠标拖动，旋转此图像。感谢。

Answer 1

像@thisOneGuy所说，你需要一个剪辑路径。在svg标签后立即添加声明：

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

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

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

请参阅fiddle

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

1 个答案: