SVG剪裁路径和变换

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

为什么？

- grssnbchr

Answer 1

因为变换也适用于剪切路径。

来自SVG规范...

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

- Robert Longson

---

谢谢，所以我必须指定rect相对于circle翻译后位置的x和y位置：http://jsfiddle.net/fA9y4/4/ - grssnbchr

但是clipPathUnits="objectBoundingBox"呢？这似乎会导致Chrome和Firefox忽略clipPath... - Martina Ferrari

@Tincho 如果你有其他问题，请随时单独提问，最好附带一个示例。 - Robert Longson

Answer 2

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

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

- Robin Payot

---

完美的解决方案！ - Rijk

这个解决方案救了我的一天。 - Cocest

注意，与OP无关，但如果元素已经有任何在剪辑路径之后应用的转换，那么这些转换也需要提取到g标签中。 - undefined