SVG clipPath与转换

我有两段几乎完全相同的代码，其中一个圆的右半部分应该根据一个矩形进行剪裁。在第一个示例中，所有操作都很好：

<svg>
    <clipPath id="cut">
        <rect width="100" height="100" x="100" y="50"></rect>
    </clipPath>

    <circle class="consumption" cx="100" cy="100" clip-path="url(#cut)" r="50"></circle>
</svg>

但在第二个例子中，当我使用圆上的平移来指定其位置时，将不再显示任何内容

<svg>
    <clipPath id="cut">
        <rect width="100" height="100" x="100" y="50"></rect>
    </clipPath>

    <circle class="consumption" transform="translate(100,100)" clip-path="url(#cut)" r="50"></circle>
</svg>

---

为什么？

因为转换也适用于clipPath

从

如果clipPathUnits=“userSpaceOnUse”，“clipPath”的内容表示引用“clipPath”元素时当前用户坐标系中的值（即，通过“clip path”属性引用“clipPath”元素的元素的用户坐标系）。 如果未指定属性“clipPathUnits”，则效果就像指定了值“userSpaceOnUse”

您仍然可以使用这样的“g”标记使其工作

<g clip-path="url(#cut)">
 <circle class="consumption" transform="translate(100,100)" r="50"></circle>
</g>

谢谢，因此我必须指定相对于

圆的平移位置的
矩形的x和y位置：但是clipPathUnits=“objectBoundingBox”呢？这似乎让Chrome和Firefox忽略了clipPath…@Tincho如果你还有其他问题，请随意提问，最好是举个例子。完美的解决方案！这个解决方案节省了我的时间。