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

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

Answer 2

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

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

SVG clipPath和转换

2 个答案: