परिवर्तित जी तत्व

Question

पर क्लिपपैथ लागू करें मैं एक सर्कल को क्लिप करने की कोशिश कर रहा हूं ताकि यह केवल उस हिस्से के लिए दिखाया जा सके जो कुछ सीमाओं के भीतर आता है। हालांकि, सर्कल एक जी तत्व के भीतर है जो परिवर्तित हो गया है। जब मैं जी तत्व या इस तत्व के भीतर पथ ("g.site" या "g.site path") के लिए क्लिप पथ लागू करता हूं तो सर्कल पूर्ण हो जाता है। मेरी समस्या दिखा लघु उदाहरण:

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

मेरी समस्या का एक काम कर डेमो इस बेला में पाया जा सकता: http://jsfiddle.net/xRh6A/

मैं दो हलकों गयी। पहला वाला बंद हो गया है (क्योंकि क्लिप-पथ विशेषता सेट है), दूसरा दिखाया गया है लेकिन (जाहिर है) क्लिप नहीं किया गया है।

मैं इस तथ्य यह है, जबकि सर्कल तत्व स्थानीय निर्देशांक और फिर तब्दील हो जाता है कि क्लिप-पथ निरपेक्ष दृष्टि से परिभाषित किया गया है से संबंधित है लगता है। क्या मैं क्लिपफैथ को एक रूपांतरित समूह के साथ उपयोग कर सकता हूं या क्या मुझे मिलान करने के लिए क्लिप पथ या सर्कल पथ को बदलना है?

संपादित करें मैंने इसे "साइट्स" को पूर्ण निर्देशांक के साथ रखकर हल किया। हालांकि, इसका मतलब था कि मैं d3.svg.arc का उपयोग नहीं कर सका (जो मैंने संलग्न सरलीकृत उदाहरण में कोड उत्पन्न कर रहा है) क्योंकि यह स्थानीय समन्वय प्रणाली में आर्क बनाता है।

मुझे अभी भी यह देखने में दिलचस्पी होगी कि इसे अन्यथा हल किया जा सकता है या नहीं।

Answer 1

g तत्व पर आपका अनुवाद प्रभावित कर रहा है clipPath कैसे प्रदान की गई है।

1. एक स्थिर पेरेंट तत्व को clip-path विशेषता जोड़ें: आप 2 विकल्प हैं। इसके बाद आप clipPath प्रतिपादन को प्रभावित किए बिना बच्चे के तत्व पर अपना अनुवाद लागू कर सकते हैं।

2. clipPath तत्व पर उलटा अनुवाद लागू करें। (नोट: मैं इस विधि को क्रियान्वित किया है कभी नहीं, लेकिन मैं इसके बारे में यहाँ पढ़ें: https://stackoverflow.com/a/16166249/3123187)

मैं विकल्प # 1 पसंद करते हैं क्योंकि मैं clipPath tranform हर बार बदलने के लिए की जरूरत नहीं है मैं g बदलने को बदलने । आपके मामले में, आप पहले से ही एक माता पिता g तत्व ताकि आप clip-path विशेषता वहाँ जोड़ सकते हैं, यदि आप clipPath लागू करने के लिए अपने 'जी # साइटों' तत्व में हर तत्व पर लागू करने का इरादा है।

<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/)

आप केवल उस clipPath के लिए करना चाहते हैं पहले चक्र के लिए लागू किया जा सकता है, तो आप सिर्फ एक मध्यवर्ती कंटेनर तत्व जोड़ चाहते हैं।

<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/)