SVG clipPath和转换

Question

我有两个几乎相同的代码片段,其中应该根据矩形剪切圆圈的右半部分.在第一个例子中,一切运作良好:

<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>

的jsfiddle

然而,在第二个中,当我在圆圈上使用平移指定其位置时,不再显示任何内容.

<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>

的jsfiddle

为什么？

Answer 1

因为变换也适用于clipPath.

从SVG规范......

如果clipPathUnits ="userSpaceOnUse",则'clipPath'的内容表示当引用'clipPath'元素时当前用户坐标系中的值(即,引用'clipPath'的元素的用户坐标系)元素通过'clip-path'属性).如果未指定属性"clipPathUnits",则效果就像指定了"userSpaceOnUse"的值一样.

Answer 2

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

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