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

Если clipPathUnits = «UserSpaceOnUse», содержимое «clipPath» представляет собой значение в текущем пользователе системы на месте координат в то время, когда элемент в «clipPath» ссылаются (т.е. , система координат пользователя для элемента, ссылающегося на элемент «clipPath», через свойство «путь клипа»). Если атрибут 'clipPathUnits' не указан, тогда эффект будет таким, как если бы было указано значение 'userSpaceOnUse'.