d3 - <g>组元素高度

Question

我正在尝试将图片剪辑为组内的圆圈。

这是剪辑路径代码

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

在Chrome控制台中查看的svg代码

根据我的理解，问题是圆圈的边缘被<g></g>组元素克隆，并且没有正确地进行处理。我想到的一件事是增加<g>的高度并调整圆圈位置，但<g>根据其包裹的内容自动获取其高度。

我希望圆形图像显示在圆角的左上角 矩形与圆形图像的中心精确地放置在矩形的x0，y0处，使得圆形图像如果在矩形的一半内半部分。

如何实现这一目标。

更新

在Gilsha建议将clipPath circle cy和cx更改为0后，结果如下。

Answer 1

问题不在于group元素。如果您希望图像放置在矩形的左上角，如上所述，则应将剪辑路径圆的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>