SVG 剪辑路径和转换答案

【问题标题】：SVG clipPath and transformationsSVG 剪辑路径和转换
【发布时间】：2013-06-27 15:25:22
【问题描述】：

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

<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

为什么？

【问题讨论】：

标签： svg

【解决方案1】：

因为变换也适用于 clipPath。

来自SVG specification...

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

【讨论】：

谢谢，所以我必须指定 rect 相对于 circle 的翻译位置的 x 和 y 位置：jsfiddle.net/fA9y4/4
但是 clipPathUnits="objectBoundingBox" 呢？似乎让 Chrome 和 Firefox 忽略了 clipPath...
@Tincho 如果您还有其他问题，请随时联系ask it separately，最好举个例子。

【解决方案2】：

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

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

【讨论】：

完美解决方案！
这个解决方案节省了我的时间。