9

我有两段几乎相同的代码，其中应根据矩形裁剪圆的右半部分。在第一个示例中，一切正常：

<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

为什么？

4

2 回答 2

13

因为转换也适用于 clipPath。

从SVG 规范...

如果clipPathUnits="userSpaceOnUse"，'clipPath'的内容表示在引用'clipPath'元素时当前用户坐标系中的值（即，引用'clipPath'的元素的用户坐标系元素通过“剪辑路径”属性）。如果未指定属性“clipPathUnits”，则效果如同指定了“userSpaceOnUse”值。

于 2013-06-30T09:57:24.917 回答
7

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

<g clip-path="url(#cut)">
 <circle class="consumption" transform="translate(100,100)" r="50"></circle>
</g>
于 2019-04-10T00:05:59.157 回答