我已将图像附加到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")
点击“添加图像”按钮添加图像。您可以通过鼠标拖动，旋转此图像。谢谢。
就像@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)">
看到小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句