d3 - <g>组元素高度

问题描述：

我试图将图像剪切成组内的一个圆。 d3 - <g>组元素高度

这里是夹路径代码

<defs> 
    <clipPath id="empImgClip"> 
     <circle r="53" cy="55" cx="55"></circle> 
    </clipPath> 
</defs>

如铬控制台查看的SVG代码

的问题，据我所知，是圆的，所述边缘被<g></g>组元素粘贴，并且没有正确显示。我想出的一件事是增加<g>的高度并调整圈位置，但<g>根据其包裹的内容自动获取其高度。

我希望圆形图像出现在圆角的矩形的左上角，圆形图像的中心恰好位于矩形的x0，y0处，以便圆形图像在矩形外部的一半内半。

这是如何实现的。

更新

Gilsha宝贵意见后到clipPath圆CY和CX改变为0，下面是结果。

元素不夹除非你附加了一个剪辑路径给他们。 –

您是否有预期视图的图像？ – Gilsha

@Gilsha我只是不希望圈子被剪裁。 – ZedBee

答

的问题是不与该组元素。如果你想要的形象，在矩形的左上角被放置在问题中提到，您应该设置CX和夹路径圈的CY属性为0

<svg> 
 
<defs> 
 
    <clipPath id="empImgClip"> 
 
     <circle r="53" cy="0" cx="0"></circle> 
 
    </clipPath> 
 
</defs> 
 
<g> 
 
<rect width=400 height=130 fill="#b4975a" stroke-width=1 stroke="#cccccc" rx=60></rect> 
 
<image height=110 width=110 href="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" clip-path="url(#empImgClip)"></image> 
 
</g> 
 
</svg>

谢谢.. Gilsha，但因为如此可以看到整个圆圈不可见。我想让整个圆圈可见。 – ZedBee

Plz检查更新后的问题。 – ZedBee

d3 - 组元素高度

相关推荐