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

If clipPathUnits="userSpaceOnUse", the contents of the ‘clipPath’ represent values in the current user coordinate system in place at the time when the ‘clipPath’ element is referenced (i.e., the user coordinate system for the element referencing the ‘clipPath’ element via the ‘clip-path’ property). If attribute ‘clipPathUnits’ is not specified, then the effect is as if a value of 'userSpaceOnUse' were specified.