Dönüştürülmüş g öğesine clipPath uygula

Question

Bir çemberi klipslemeye çalışıyorum, böylece yalnızca belirli sınırlar içinde kalan kısım için gösteriliyor. Bununla birlikte, daire dönüştürülen bir g öğesi içinde. Klip yolunu g öğeye veya bu öğenin içindeki yola ("g.site" veya "g.site yolu") uyguladığımda, daire tamamlandığında kırpılır. sorunumu gösteren Kısa örnek:

<svg width="600" height="600"> 
    <defs> 
    <clipPath id="myClip"> 
     <path d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z" 
     /> 
    </clipPath> 
    </defs> 
    <g id="voronoi"> 
    <g id="cells"> 
     <path class="cell" d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z" 
     /> 
    </g> 
    <g id="sites"> 
     <g class="site" transform="translate(483.29548177370367,267.14072835257724)" clip-path="url(#myClip)"> 
     <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" 
     /> 
     </g> 
     <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> 
     <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" 
     /> 
     </g> 
    </g> 
    </g> 
</svg> 

benim sorunun bir çalışma demo bu keman bulunabilir:

http://jsfiddle.net/xRh6A/ İki çevreleri ekledi. İlki kırpılır (klip-yolu özniteliği ayarlandığından), ikincisi gösterilir, fakat (belli ki) kırpılmamış.

Bu durum, daire öğesi yerel koordinatlara sahipken ve daha sonra dönüştürüldüğünde, klip yolunun mutlak anlamda tanımlanması gerçeğiyle ilişkili olduğunu varsayalım. ClipPath'i dönüştürülmüş bir grupla kullanabilir miyim veya onları eşleştirmek için klip yolunu veya daire yolunu değiştirmek zorunda mıyım?

Edit "Siteleri" mutlak koordinatlarla yerleştirerek çözdüm. Ancak bu, d3.svg.arc'yi (eklediğim basitleştirilmiş örnekte kod üreten) kullanamadığım anlamına gelir çünkü yerel bir koordinat sisteminde yaylar oluşturur.

Yine de çözülüp çözülmeyeceğini görmek isterim.

Answer 1

öğesindeki çeviriniz, clipPath öğesinin nasıl işleneceğini etkiler.

1. statik ana öğeye clip-path özellik ekleyin: 2 seçeneğiniz mevcuttur. Daha sonra çevirinizi clipPath görüntülemeyi etkilemeden alt öğeye uygulayabilirsiniz.

2. Ters çeviriyi clipPath öğesinde uygulayın. Ben clipPath Dönüşümü her seferinde değiştirmek gerekmez çünkü

Ben dönüşümü g değiştirmek seçenek 1. tercih (https://stackoverflow.com/a/16166249/3123187 Not: Ben bu yöntemi uygulamaya hiç, ama burada bu konuda okuyun) . Sizin durumunuzda, zaten g elemanına sahip olursunuz, böylece 'g # site' öğenizdeki her öğeye uygulamak için clipPath uygulamasını uygulamak isterseniz, clip-path özniteliğini ekleyebilirsiniz.

<g id="sites" clip-path="url(#myClip)"> 
    <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> 
    <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> 
    </g> 
    <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> 
    <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> 
    </g> 
</g> 

(jsfiddle: http://jsfiddle.net/SWyeD/)

sadece ilk çembere uygulanacak bu clipPath için düşünüyorsanız, sadece bir ara kap elemanı eklersiniz.

<g id="sites"> 
    <g clip-path="url(#myClip)"> 
    <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> 
     <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> 
    </g> 
    </g> 
    <g class="site" transform="translate(483.29548177370367,267.14072835257724)"> 
    <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> 
    </g> 
</g> 

(jsfiddle: http://jsfiddle.net/bdB65/)