SVG clipPath和轉換

我有兩個幾乎相同的代碼片段，其中應該根據矩形剪切圈的右半部分。在第一個例子，一切運作良好：SVG clipPath和轉換

<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

爲什麼？

來源

2013-06-30 wnstnsmth

因爲轉換也適用於clipPath。

從SVG specification...

如果clipPathUnits =「userSpaceOnUse」中，「clipPath」的內容表示在當前用戶的值在當「clipPath」元素被引用時間座標代替系統（即，通過'clip-path'屬性引用'clipPath'元素的元素的用戶座標系統）。如果未指定'clipPathUnits'屬性，則效果就好像指定了'userSpaceOnUse'的值。

來源

2013-06-30 09:57:24

謝謝，所以我必須指定'rect'相對於'circle'的翻譯位置的x和y位置：http://jsfiddle.net/fA9y4/4/ – wnstnsmth

但clipPathUnits = 「objectBoundingBox」？它似乎使Chrome和Firefox只是忽略clipPath ... – Tincho

@Tincho如果你有另一個問題，隨時[單獨問]（http://stackoverflow.com/questions/ask），理想情況下舉一個例子。 –

SVG clipPath和轉換

回答

相關問題