SVG 剪辑路径和转换 [英] SVG clipPath and transformations

问题描述

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

I have two nearly identical pieces of code where the right half of a circle should be clipped according to a rectangle. In the first example, all works well:

<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

不过，在第二个中，当我在圆圈上使用翻译来指定其位置时，不再显示任何内容.

In the second one though, when I am using a translation on the circle to specify its position, nothing is shown anymore.

<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

为什么?

推荐答案

因为转换也适用于 clipPath.

Because the transform applies to the clipPath too.

来自 SVG 规范...

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

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.

这篇关于SVG 剪辑路径和转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！