जावास्क्रिप्ट के साथ, मैं एक एसवीजी <g> तत्व के जेड इंडेक्स / परत को बदल सकता हूं?

Question

मान लें कि मेरे पास कुछ मिश्रित आकार हैं ( <g>)। मैं उन्हें क्लिक करने और उन्हें खींचने में सक्षम होना चाहता हूं, लेकिन मैं चाहता हूं कि मैं उस पल को खींचता हूं जो जेड ऑर्डर में दूसरे के ऊपर है, ताकि अगर मैं इसे दूसरे पर खींचता हूं, तो दूसरा एक ग्रहण किया जाना चाहिए।

Comments

यहाँ देखें ।

— एलिरन मलका

एसवीजी री-ऑर्डरिंग जेड-इंडेक्स (राफेल वैकल्पिक) के

— एलिरन मलका

Answer 1

एसवीजी में जेड इंडेक्स को उस क्रम से परिभाषित किया जाता है, जो दस्तावेज़ में तत्व दिखाई देते हैं। यदि आप शीर्ष पर एक विशिष्ट आकार लाना चाहते हैं तो आपको तत्व क्रम बदलना होगा।

Comments

दस्तावेज़ के अंत में @theonlygusti तत्व सबसे ऊपर हैं। यदि आप jQuery का उपयोग कर रहे हैं, तो आपको कुछ का उपयोग करने में सक्षम होना चाहिए$('#thing-i-want-on-top').appendTo('#my-svg');

— एडम ब्राडली

तो, मूल रूप से, होवर पर शीर्ष (z- अक्ष) को आकार देने का कोई तरीका नहीं है ...?

— छारवे

jQuery SVG रास्तों के बदलते क्रम का समर्थन नहीं करता है।

— सेंट फेयर

@chharvey, आप चीजों को फिर से आदेश देकर शीर्ष पर तैर सकते हैं - फिर से जोड़कर। यहाँ एक सुंदर उदाहरण है: codepen.io/osublake/pen/YXoEQe

— फ्रेज़र किर्कमैन

Answer 2

पेड़ में चलते तत्वों का एक विकल्प उन तत्वों का उपयोग <use>करना है जहां आप xlink:hrefविशेषता बदलते हैं ताकि यह आपको वह z ऑर्डर दे जो आप चाहते हैं।

यहाँ svg-Developers मेलिंगलिस्ट पर एक पुराना धागा है जो कुछ आकृतियों को चेतन करने के संदर्भ में इस विषय पर चर्चा कर रहा है।

अपडेट करें:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="width:100%; height: 100%">
    <circle id="c1" cx="50" cy="50" r="40" fill="lime" />
    <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" />
    <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" />
    <use id="use" xlink:href="#c1" />
</svg>

इस उदाहरण में <उपयोग> तत्व अंतिम है, जो इसे सबसे आगे का तत्व बनाता है। हम xlink:hrefविशेषता को बदलकर अन्य तत्वों में से किसी को चुन सकते हैं । उपरोक्त उदाहरण में हमने सर्कल को उठाया id="c1", जिससे यह सबसे ऊपरी तत्व के रूप में प्रकट होता है।

मुरली देखना ।

Comments

इस उत्तर होगा बहुत अधिक उपयोगी एक उदाहरण है, या उस मेलिंग सूची से जानकारी (जो गेटेड किया जाता है) के साथ साथ।

— काइओटिक

काम करता है, लेकिन आप उचित रूप से उपयोग जोड़ते हैं। यदि आप अनुवाद का उपयोग करते हैं, तो <उपयोग> का उनके बारे में कोई पता नहीं है

— जोहान बेडरसोफर

@JochenBedersdorfer सुनिश्चित नहीं है कि आपका क्या मतलब है, अनुवाद z क्रम से संबंधित कैसे हैं?

— एरिक डाहलस्ट्रम

उस बारे में बहुत स्पष्ट नहीं था। यदि आप परिवर्तनों के साथ नेस्टेड <g> -tags का उपयोग करते हैं, तो आपको getTransformToElement (..) का उपयोग करके निर्देशांक परिवर्तित करने की आवश्यकता है; (एसवीजी डॉक्स देखें)

— जोहान बेडर्सडॉर्फर

xlink:hrefपदावनत किया जाता है, अब यह सिर्फ हैhref

— ओस्विना

Answer 3

यह पुराना सवाल है, लेकिन ...

FireFox (7+) और Chrome (14+) पर आप svg_element को शीर्ष पर खींच सकते हैं। यह आपको पूर्ण z अक्ष नियंत्रण की स्वतंत्रता नहीं देता है, लेकिन यह कुछ भी नहीं से बेहतर है;)

बस उस तत्व को फिर से जोड़ दें।

var svg = doc.createElemNS('svg');
var circle = doc.createElemNS('circle');
var line = doc.createElemNS('line');

svg.appendChild(circle); // appends it
svg.appendChild(line);   // appends it over circle
svg.appendChild(circle); // redraws it over line now

मुझे लगा कि यह एन या त्रुटि फेंकने जा रहा है।

appendChild == खुद को बदलें == redraw

Comments

त्रुटि बिल्कुल नहीं; appendChildपहले पुराने माता-पिता से हटाता है, यदि कोई हो, भले ही वह नए माता-पिता के समान हो, तो उसे नए माता-पिता की बच्चे की सूची में जोड़ देता है।

— पोटाटोज़वाटर

Answer 4

एक और समाधान का उल्लेख नहीं किया गया है कि प्रत्येक svg आइटम / सेट को एक div में रखा जाए। आप divs के z-index को आसानी से बदल सकते हैं।

फिडल: कंटेनरों के लिए जेड-इंडेक्स के साथ एसवीजी तत्व चक्र

... सामने वाले तत्व को 'पुश' करने के लिए बटन पर दबाएँ। (बनाम पूरे सेट को निरस्त करने और 1 तत्व को सामने लाने के लिए, लेकिन मूल आदेश को स्वीकार किए गए समाधान में रखते हुए)

रिश्तेदार z सूचकांक होना बहुत अच्छा होगा ...

अगर यह jsfiddle से एक कड़ी है?

var orderArray=[0,1,2];
var divArray = document.querySelectorAll('.shape');
var buttonArray = document.querySelectorAll('.button');

for(var i=0;i<buttonArray.length;i++){
    buttonArray[i].onclick=function(){
        var localI = i;
        return function(){clickHandler(orderArray.indexOf(localI));};
    }();
}


function clickHandler(divIndex) {
     orderArray.push(orderArray.splice(divIndex, 1)[0]);
    orderDivs();
}

function orderDivs(){
    for(var i=0;i<orderArray.length;i++){
       divArray[orderArray[i]].style.zIndex=i;        
    }
}

svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}
div{
    position:absolute;
}
div.button{
    top:55%;
    height:5%;
    width:15%;
    border-style: outset;
    cursor:pointer;
    text-align: center;
    background:rgb(175, 175, 234);
    
}
div.button:hover{
    border-style: inset;
    background:yellow;
    
}
div.button.first{
    left:0%;
}
div.button.second{
    left:20%;
}
div.button.third{
    left:40%;
}

<div class="shape">
    <svg>
    <circle cx="50" cy="50" r="40" fill="lime" />
    </svg>
</div>
<div class="shape">
    <svg>
        <rect x="4" y="20" width="200" height="50" fill="cyan" />
    </svg>
</div>
<div class="shape">
    <svg>
        <circle cx="70" cy="70" r="50" fill="fuchsia" />
    </svg>
</div>

<div class='button first'>lime</div>
<div class='button second'>cyan</div>
<div class='button third'>fuchsia</div>

Answer 5

हां आदेश वह है जो निर्दिष्ट करता है कि दूसरे के सामने कौन सी वस्तु होगी। आदेश में हेरफेर करने के लिए आपको डोम के बारे में चीजों को स्थानांतरित करने की आवश्यकता होगी। SVG wiki पर https://www.w3.org/TR/SVG11/render.html#RenderingOrder पर इसका एक अच्छा उदाहरण है।

Comments

यह लिंक अब काम नहीं करता है। यह लिंक उसी विचार की व्याख्या करता है: लिंक

— स्टीव

Answer 6

यदि आप svg.js लाइब्रेरी का उपयोग करते हैं , तो आप किसी भी तत्व को शीर्ष पर ले जाने के लिए ".front ()" कमांड का उपयोग कर सकते हैं।

Answer 7

SVGरेंडरिंग के "पेंटर्स मॉडल" का उपयोग करता है। पेंट को क्रमिक संचालन में आउटपुट डिवाइस पर लागू किया जाता है जैसे कि प्रत्येक ऑपरेशन आउटपुट डिवाइस के कुछ क्षेत्र पर पेंट करता है। जब क्षेत्र पहले से चित्रित क्षेत्र को ओवरलैप करता है तो नया पेंट आंशिक रूप से या पूरी तरह से पुराने को अस्पष्ट करता है ।- इस से लिंक करें

Answer 8

एसवीजी में, एक उच्च बड़ा जेड इंडेक्स प्राप्त करने के लिए आपको तत्व को DOM ट्री में नीचे ले जाना चाहिए। आप इसे jQuery के साथ कर सकते हैं, एसवीजी तत्व का चयन कर सकते हैं, इसे हटा सकते हैं और इसे उस स्थिति में फिर से जोड़ सकते हैं जो आप चाहते हैं:

$('g.element').remove().appendTo('svg');

Answer 9

सैम के जवाब में एडम ब्रैडली की टिप्पणी बिल्कुल बिंदु पर थी। यह केवल CSS के बजाय jQuery का उपयोग करता है, लेकिन उसने यह कहा:

$('#thing-i-want-on-top').appendTo('#my-svg');

हालाँकि, मैं जो भी बना रहा था, उसके लिए मुझे अपने एसवीजी पथ की आवश्यकता थी, जो कि होवर पर किसी अन्य पथ से ऊपर हो, लेकिन फिर भी मेरे एसवीजी पाठ के नीचे हो। तो यहाँ मैं क्या लेकर आया हूँ:

$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');

AppendTo और InsertBefore दोनों आपके तत्व को एक नए स्थान पर ले जाएंगे जिससे आप SVG तत्व की इच्छा को बदल सकते हैं।