d3 - <g> 组元素高度答案

【问题标题】：d3 - <g> Group Element Heightd3 - <g> 组元素高度
【发布时间】：2017-02-27 08:29:34
【问题描述】：

我正在尝试将图像剪辑成组内的一个圆圈。

这里是剪辑路径代码

<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 后，结果如下。

【问题讨论】：

元素不会被剪辑，除非您已将剪辑路径附加到它们。
你有预期视图的图像吗？
@Gilsha 我只是不想剪掉圆圈。
@RobertLongson 我没有将任何剪辑路径附加到，圆圈剪辑路径只是我在代码中使用的剪辑路径，

标签： d3.js svg

【解决方案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>

【讨论】：

谢谢.. Gilsha，但可以看到整个圆圈是不可见的。我希望整个圆圈都可见。