SVG clipYolu ve dönüşümler

Question

Çemberin sağ yarısının bir dikdörtgene göre kırpılması gereken hemen hemen aynı kod parçalarına sahibim. İlk örnekte, tüm iyi çalışıyor: İkinci birinde

<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

olsa da, konumunu belirtmek için daireyi bir çeviri kullanıyorum zaman, hiçbir şey artık gösterilmiştir.

<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

Neden ? Bu dönüşüm, clipPath'a da uygulandığından,

Answer 1

. SVG specification...

itibaren

Eğer clipPathUnits = "UserSpaceOnUse", 'clipPath' içeriği 'clipPath' eleman başvuruda bulunulan anda ve yerde koordinat sistemi geçerli kullanıcı değerleri temsil (yani , 'clipPath' elemanına 'clip-path' özelliği üzerinden referans veren eleman için kullanıcı koordinat sistemi. ‘clipPathUnits’ özniteliği belirtilmediyse, efekt 'userSpaceOnUse' değeri belirtilmiş gibi belirtilir.