Clip SVGPercorso e trasformazioni

Question

Ho due pezzi di codice quasi identici in cui la metà destra di un cerchio deve essere ritagliata secondo un rettangolo. Nel primo esempio, tutto funziona bene:

<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

Nella seconda però, quando sto usando traduzione sul cerchio per specificare la sua posizione, nulla è più indicato.

<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

Perché?

Answer 1

Poiché la trasformazione si applica anche al clipPath.

Dal SVG specification...

Se clipPathUnits = "userSpaceOnUse", il contenuto del 'clipPath' rappresentano valori nella utente corrente sistema in vigore coordinate nel momento in cui l'elemento 'clipPath' fa riferimento (ie , il sistema di coordinate utente per l'elemento che fa riferimento all'elemento 'clipPath' tramite la proprietà 'clip-path'). Se l'attributo 'clipPathUnits' non è specificato, l'effetto è come se fosse specificato un valore di 'userSpaceOnUse'.