এসভিজি উপাদানগুলিতে জেড-ইনডেক্স কীভাবে ব্যবহার করবেন?

154

আমি আমার প্রোজেক্টে এসভিজি চেনাশোনাগুলি এইভাবে ব্যবহার করছি,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
</svg>

এবং আমি gউপাদানগুলিকে প্রথম দেখানোর জন্য ট্যাগে জেড-ইনডেক্স ব্যবহার করছি । আমার প্রকল্পে আমাকে কেবল জেড-সূচক মান ব্যবহার করা দরকার, তবে আমি আমার এসভিজি উপাদানগুলিতে জেড-সূচক ব্যবহার করতে পারি না। আমি অনেকগুলি গুগল করেছি তবে আমি তুলনামূলকভাবে কিছুই পাইনি। সুতরাং দয়া করে আমার এসভিজিতে জেড-সূচক ব্যবহার করতে আমাকে সহায়তা করুন।

এখানে ডেমো রয়েছে।

— কারথি কেয়ান
সূত্র

জাভাস্ক্রিপ্ট সহ

— বুজেড-ডিইই

163

সবিস্তার বিবরণী

এসভিজি স্পেসিফিকেশন সংস্করণে ১.১ উপস্থাপনা আদেশ নথির আদেশের উপর ভিত্তি করে:

first element -> "painted" first

এসভিজির 1.1 রেফারেন্স । সবিস্তার বিবরণী

৩.৩ রেন্ডারিং অর্ডার

এসভিজি ডকুমেন্ট খণ্ডের উপাদানগুলির একটি অন্তর্নিহিত অঙ্কন ক্রম থাকে, এসভিজি নথি খণ্ডের প্রথম উপাদানগুলি "আঁকা" হয় । পরবর্তী উপাদানগুলি পূর্ববর্তী আঁকা উপাদানের শীর্ষে আঁকা হয়।

সমাধান (ক্লিনার-দ্রুত)

আপনার সবুজ চেনাশোনাটি সর্বশেষতম বস্তুটি আঁকতে হবে put সুতরাং দুটি উপাদান অদলবদল।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> 
   <!-- First draw the orange circle -->
   <circle fill="orange" cx="100" cy="95" r="20"/> 

   <!-- Then draw the green circle over the current canvas -->
   <circle fill="green" cx="100" cy="105" r="20"/> 
</svg>

স্নিপেট প্রসারিত করুন

এখানে আপনার jsFizz এর কাঁটাচামচ ।

সমাধান (বিকল্প)

useবৈশিষ্ট্যের সাথে ট্যাগ xlink:hrefএবং মানটির আইডি হিসাবে মান। ফলাফলটি দুর্দান্ত মনে হলেও এটি সর্বোত্তম সমাধান নাও হতে পারে তা মনে রাখবেন। কিছুটা সময় থাকার পরে, এসভিজি ১.১ স্পেসিফিকেশনটির লিঙ্কটি "এলিমেন্ট" ব্যবহার করুন ।

উদ্দেশ্য:

মূল উপাদানটিতে একটি আইডি যুক্ত করার জন্য লেখককে রেফারেন্সড ডকুমেন্টটি সংশোধন করার প্রয়োজন এড়াতে।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
    <!-- First draw the green circle -->
    <circle id="one" fill="green" cx="100" cy="105" r="20" />
    
    <!-- Then draw the orange circle over the current canvas -->
    <circle id="two" fill="orange" cx="100" cy="95" r="20" />
    
    <!-- Finally draw again the green circle over the current canvas -->
    <use xlink:href="#one"/>
</svg>

স্নিপেট প্রসারিত করুন

এসভিজি 2 তে নোটস

এসভিজি 2 স্পেসিফিকেশন হল পরবর্তী বড় রিলিজ এবং এখনও উপরের বৈশিষ্ট্যগুলিকে সমর্থন করে।

3.4। অর্ডার প্রদান

এসভিজিতে উপাদানগুলি তিন মাত্রায় অবস্থিত। এসভিজি ভিউপোর্টের এক্স এবং ওয়াই অক্ষের উপরে তাদের অবস্থান ছাড়াও, এসভিজি উপাদানগুলিও z অক্ষের উপরে অবস্থিত। জেড-অক্ষের অবস্থানটি তারা আঁকা হয় এমন ক্রমটি সংজ্ঞায়িত করে ।

জেড অক্ষের পাশাপাশি, উপাদানগুলি স্ট্যাকিং প্রসঙ্গে বিভক্ত করা হয়।

3.4.1। এসভিজিতে স্ট্যাকিং প্রসঙ্গ স্থাপন করা

...

স্ট্যাকিং প্রসঙ্গটি হ'ল ধারণাগত সরঞ্জাম যা ডকুমেন্টটি রেন্ডার করার সময় উপাদানগুলির একে অপরের উপরে আঁকতে হবে যাতে ক্রমটি বর্ণনা করতে ব্যবহৃত হয় ...

— Maicolpt
সূত্র

রেন্ডারিং অর্ডারকে ওভাররাইড করার বিষয়ে একটি পুরাতন খসড়াও রয়েছে তবে এটি একটি বৈশিষ্ট্য উপলভ্য নয়। খসড়া রেফারেন্স

— মাইকোল্ট্ট

12

বাবা! উপাদানগুলি আপনি যেভাবে আঁকতে চান সেভাবে আঁকতে সর্বদা সহজ নয়, বিশেষত যদি বস্তুগুলি অগ্রগতিগতভাবে উত্পন্ন হয় এবং নেস্টেড উপস্থিত হতে পারে (যেমন এটি প্রদর্শিত হয় জিতে a, b থাকতে পারে না, যেমন একটি জি ভাইবোনের নীচে থাকে) সি তবে বি এর উপরে)

— মাইকেল

@ মিশেল: আপনার দৃশ্যে প্রথমে আমি চেষ্টা করার চেষ্টা করব যদি সত্যিই উপাদানগুলি গোষ্ঠীভুক্ত করতে হয়।

— মাইকোল্ট্ট

1

এটি 'এক্সলিংকটি ব্যবহার করুন: href' দুর্দান্ত এবং অদ্ভুত এবং আমার যা প্রয়োজন তার জন্য নিখুঁত !!

— আয়ান

32

অন্যরা যেমন বলেছে, জেড-ইনডেক্সটি ডিওমে উপস্থিত হওয়ার ক্রম দ্বারা সংজ্ঞায়িত করা হয়। যদি আপনার এইচটিএমএলটিকে ম্যানুয়ালি পুনরায় অর্ডার করা কোনও বিকল্প না হয় বা অসুবিধা হয় তবে আপনি এসভিজি গোষ্ঠী / অবজেক্টগুলি পুনরায় অর্ডার করতে ডি 3 ব্যবহার করতে পারেন।

ডিওএম অর্ডার এবং মিমিক জেড-ইনডেক্স কার্যকারিতা আপডেট করতে ডি 3 ব্যবহার করুন

ডি 3 সহ এসভিজি এলিমেন্ট জেড-ইনডেক্স আপডেট করা হচ্ছে

সর্বাধিক প্রাথমিক স্তরে (এবং আপনি যদি অন্য কোনও আইডি ব্যবহার না করে থাকেন), আপনি জেড-ইনডেক্সের জন্য স্ট্যান্ড-ইন হিসাবে উপাদান আইডি ব্যবহার করতে পারেন এবং সেগুলির সাথে পুনঃক্রম করতে পারেন। এর বাইরে আপনি আপনার কল্পনাটি বুনো চালিয়ে যেতে পারেন।

কোড স্নিপেট উদাহরণ

var circles = d3.selectAll('circle')
var label = d3.select('svg').append('text')
    .attr('transform', 'translate(' + [5,100] + ')')

var zOrders = {
    IDs: circles[0].map(function(cv){ return cv.id; }),
    xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
    yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
    radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
    customOrder: [3, 4, 1, 2, 5]
}

var setOrderBy = 'IDs';
var setOrder = d3.descending;

label.text(setOrderBy);
circles.data(zOrders[setOrderBy])
circles.sort(setOrder);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"> 
  <circle id="1" fill="green" cx="50" cy="40" r="20"/> 
  <circle id="2" fill="orange" cx="60" cy="50" r="18"/>
  <circle id="3" fill="red" cx="40" cy="55" r="10"/> 
  <circle id="4" fill="blue" cx="70" cy="20" r="30"/> 
  <circle id="5" fill="pink" cx="35" cy="20" r="15"/> 
</svg>

স্নিপেট প্রসারিত করুন

মূল ধারণাটি হ'ল:

এসভিজি ডোম উপাদান নির্বাচন করতে ডি 3 ব্যবহার করুন।
```
var circles = d3.selectAll('circle')
```
আপনার এসভিজি উপাদানগুলির সাথে 1: 1 সম্পর্ক নিয়ে জেড-ইনডেক্সগুলির কিছু অ্যারে তৈরি করুন (যে আপনি পুনঃক্রম করতে চান)। নীচের উদাহরণগুলিতে ব্যবহৃত জেড-ইনডেক্স অ্যারেগুলি হ'ল আইডি, এক্স ও ওয়াই অবস্থান, রেডিয়াই ইত্যাদি ....
```
var zOrders = {
    IDs: circles[0].map(function(cv){ return cv.id; }),
    xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
    yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
    radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
    customOrder: [3, 4, 1, 2, 5]
}
```
তারপরে, আপনার জেড-সূচকগুলি সেই নির্বাচনের সাথে আবদ্ধ করতে D3 ব্যবহার করুন।
```
circles.data(zOrders[setOrderBy]);
```
শেষ অবধি, D3- এ ডর্টের উপর ভিত্তি করে DOM এর উপাদানগুলিকে পুনঃক্রম করতে ডেকে আনে।
```
circles.sort(setOrder);
```

উদাহরণ

আপনি আইডি দ্বারা স্ট্যাক করতে পারেন

শীর্ষে বামতম এসভিজি সহ

শীর্ষে ছোটতম রেডিও

অথবা নির্দিষ্ট অর্ডারের জন্য জেড-ইনডেক্স প্রয়োগ করার জন্য একটি অ্যারে নির্দিষ্ট করুন - আমার উদাহরণ কোডে অ্যারেটি [3,4,1,2,5]3 র্থ সার্কেলটিকে (মূল HTML ক্রমে) ডઓমে 1 ম হতে, 4 র্থ স্থানে 2 ষ্ঠ হতে, 3 য় হতে 3 য় স্থানে পুনঃক্রম করে , এবং আরও ...

— স্টিভ লাডাভিচ
সূত্র

অবশ্যই এখানে সেরা উত্তর ... ১০০। কেন এখন এটি গৃহীত হয়?

— টাইগারারr

1

@ টাইগারারrrr স্ট্যাকিং অর্ডার নিয়ন্ত্রণ করার মতো সহজ কিছু করার জন্য একটি বাহ্যিক গ্রন্থাগার আমদানি করা পাগলামি। এটিকে আরও খারাপ করার জন্য, ডি 3 একটি বিশেষত বড় লাইব্রেরি।

— আইএম

2

@ আমি, ভাল বলেছেন। যদিও এটি একটি সমস্যার সমাধান, এটি এখানে থাকার যোগ্য করে তোলে; এটা নয়, এবং হয় না উত্তর। নতুন উত্তরটি বের হয়ে আসে এবং ব্রাউজারগুলি পরিবর্তিত হয় তবে কেবলমাত্র বর্তমান উত্তরটি প্রতিস্থাপন করা উচিত। যে কেউ এই উত্তরটি ব্যবহার করতে চাইছেন, সমস্ত ডি 3 টি আমদানি করবেন না, কেবল আপনার প্রয়োজনীয় মডিউলগুলি আমদানি করুন। কেবল এই জন্য সমস্ত ডি 3 আমদানি করবেন না।

— স্টিভ লাডাভিচ

31

উল্টানোর চেষ্টা করুন #oneএবং #two। এই ঝাঁকুনিটি দেখুন: http://jsfiddle.net/hu2pk/3/

Update

এসভিজিতে, জেড-সূচকটি নথিতে উপাদানটি উপস্থিত হওয়ার ক্রম দ্বারা সংজ্ঞায়িত হয় । আপনি চাইলে এই পৃষ্ঠায়ও নজর রাখতে পারেন: https://stackoverflow.com/a/482147/1932751

— লুকাস উইলেমস
সূত্র

1

ধন্যবাদ তবে জেড-ইনডেক্স মান ভিত্তিক উপাদানটি আমার দরকার।

— কারথি কেয়ান

ঠিক আছে. এবং আপনি চান # এক # দুই বা বিপরীতে?

— লুকাস উইলেস

হ্যাঁ, যদি আমি # একের জন্য জেড-সূচক মানকে -1 হিসাবে বোঝায় তবে এটি শীর্ষ স্তরে প্রদর্শিত হবে।

— কারথি কেয়ান

10

এসভিজি নির্দিষ্টকরণের কোনওটিতে জেড-ইনডেক্সের সম্পত্তি নেই। কোন উপাদানগুলি উপরে উপস্থিত হয় এবং নীচে প্রদর্শিত হয় তার একমাত্র উপায় হ'ল ডিওএম ক্রম ব্যবহার করে

— নিকোলাসউমিন

9

d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };

এবং তারপর আপনি বলতে পারেন selection.moveToFront()মাধ্যমে stackoverflow.com/questions/14167863/...

— mb21

21

আপনি ব্যবহার করতে পারেন ।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
    <use xlink:href="#one" />
</svg>

উপরে সবুজ বৃত্ত উপস্থিত হয়।
jsFiddle

— জোসে রুই সান্টোস
সূত্র

4

এটি কি # এক বার দুবার আঁকবে?

— মারিওরাফ্ট

@ ম্যারিওরাফ্ট হ্যাঁ, #oneদুবার আঁকা। তবে আপনি চাইলে সিএসএসের মাধ্যমে প্রথম দৃষ্টান্তটি লুকিয়ে রাখতে পারেন। useউল্লেখিত ডিওএম উপাদানটির ক্লোনিংয়ের মতো একই প্রভাব রয়েছে

— জোসে রুই সান্টোস

+1 কারণ এটির জন্য জাভাস্ক্রিপ্টের দরকার নেই তবে -1 কারণ যে <g>কোনওভাবে লোড করার আগে DOM পরিবর্তন করার সময় আপনি নিজের ক্রমটি পরিবর্তন করতে পারেন ।

— হাফেনক্রিনিচ

14

আলোচিত হিসাবে, এসভিজিগুলি যথাযথভাবে রেন্ডার হয় এবং জেড-ইনডেক্সটিকে অ্যাকাউন্টে নেয় না (এখনকার জন্য)। সম্ভবত কেবল নির্দিষ্ট উপাদানটিকে তার পিতামাতার নীচে প্রেরণ করুন যাতে এটি শেষ রেন্ডার হয়।

function bringToTop(targetElement){
  // put the element at the bottom of its parent
  let parent = targetElement.parentNode;
  parent.appendChild(targetElement);
}

// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));

আমার জন্য কাজ করেছেন।

হালনাগাদ

যদি আপনার কাছে নেস্টেড এসভিজি থাকে তবে গোষ্ঠীগুলি থাকে, আপনাকে আইটেমটির প্যারেন্টনোড থেকে আনা দরকার।

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

এসভিজির একটি দুর্দান্ত বৈশিষ্ট্য হ'ল প্রতিটি উপাদানটিতে এটির অবস্থান রয়েছে যা নির্বিশেষে এটি কোন গ্রুপে বাস করে: +1:

— bumsoverboard
সূত্র

হাই, এটি আমার পক্ষে কাজ করেছিল তবে 'নীচে নামিয়ে' সমতুল্য কী হবে? ধন্যবাদ

— গ্যাভিন

@ গ্যাভিন এসভিজি উপাদানগুলি উপর থেকে নীচে থেকে ক্রমানুসারে আঁকা। শীর্ষে কোনও উপাদান রাখার জন্য, আমরা এটি () সংযোজন করি যাতে এটি শেষ উপাদান। বিপরীতে, আমরা নীচে প্রেরিত কোনও উপাদান চাইলে আমরা এটিকে প্রিপেন্ড () দ্বারা প্রথম উপাদান হিসাবে স্থাপন করি। টুবোটমফএসভিজি (টার্গেটইলিমেন্ট) ফাংশনটি নিয়ে আসুন {আসুন পিতামাতাকে = টার্গেটএলমেন্ট.উনার এসভিজিইলেট; parent.prepend (targetElement); }

— বামসোভারবোর্ড

13

ডি 3 ব্যবহার:

আপনি যদি প্রতিটি নির্বাচিত উপাদানটিকে পুনরায় সন্নিবেশ করতে চান তবে তার পিতামাতার শেষ সন্তান হিসাবে।

selection.raise()

— দিসো
সূত্র

5

selection.raise()ভি 3 হিসাবে ডি 3 এ নতুন।

— tephyr

9

এসভিএজেজের জন্য কোনও জেড-সূচক নেই। তবে এসওজি নির্ধারণ করে যে আপনার কোন উপাদানটি ডিওমে অবস্থিত অবস্থানের দ্বারা শীর্ষে রয়েছে। সুতরাং আপনি অবজেক্টটি সরাতে পারেন এবং এটিকে svg এর শেষে রাখতে পারবেন এটি "সর্বশেষ রেন্ডার" উপাদান তৈরি করে। এর পরে দৃশ্যমানভাবে "শীর্ষস্থানীয়" রেন্ডার করা হয়।

JQuery ব্যবহার:

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

ব্যবহার:

moveUp($('#myTopElement'));

D3.js ব্যবহার করে:

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

ব্যবহার:

myTopElement.moveUp();

— Hafenkranich
সূত্র

এর 2019 এখন, এটি কি এখনও সত্য? যেমন এসভিজি ২.০ আধুনিক ব্রাউজারগুলিতে গ্রহণ করেছে?

— অ্যান্ড্রু এস

8

ডি 3 ব্যবহার:

আপনি যদি ডেটা ব্যবহারের ক্ষেত্রে বিপরীত ক্রমে উপাদানটি যুক্ত করতে চান:

.insert('g', ":first-child")

পরিবর্তে

একটি গ্রুপ উপাদানের শীর্ষে একটি উপাদান যুক্ত করা

— নাথান হেনশার
সূত্র

5

আর একটি সমাধান ডিভগুলি ব্যবহার করা হবে, যা এসভিজি উপাদানগুলি ধারণ করতে zIndex ব্যবহার করে s এখানে যেমন: https://stackoverflow.com/a/28904640/4552494

— রোমান রেখলার
সূত্র

4

এই উত্তরের তারিখ হিসাবে পোস্ট করা পরিষ্কার, দ্রুত এবং সহজ সমাধানগুলি সন্তোষজনক নয়। এগুলি ত্রুটিযুক্ত বক্তব্যকে কেন্দ্র করে নির্মিত হয়েছে যে এসভিজির দলিলগুলিতে জেড অর্ডার নেই। গ্রন্থাগারগুলিও প্রয়োজন হয় না। কোডের একটি লাইন বেশিরভাগ ক্রিয়াকলাপ সম্পাদন করতে পারে জেড অর্ডার অবজেক্টস বা অবজেক্টের গোষ্ঠীগুলির জন্য যা এমন অ্যাপ্লিকেশন বিকাশে প্রয়োজন হতে পারে যা 2 ডি অবজেক্টকে একটি জাইজেড স্পেসে ঘুরিয়ে দেয়।

জেড অর্ডার অবশ্যই এসভিজি ডকুমেন্ট টুকরাগুলিতে বিদ্যমান

এসভিজি ডকুমেন্টের খণ্ডকে যা বেস নোড টাইপ এসভিজিলেমেন্ট থেকে প্রাপ্ত উপাদানগুলির একটি গাছ is একটি এসভিজি ডকুমেন্ট টুকরাটির মূল নোডটি একটি এসভিজিএসভিজিইলেট, যা একটি HTML5 <svg> ট্যাগের সাথে সম্পর্কিত। এসভিজিজিলেণ্ট <g> ট্যাগের সাথে সামঞ্জস্য করে এবং একত্রিত শিশুদের অনুমতি দেয়।

সিএসএসের মতো এসভিজিলেমেন্টে জেড-সূচক বৈশিষ্ট্য থাকা এসভিজি রেন্ডারিং মডেলকে পরাস্ত করবে। ডাব্লু 3 সি এসভিজি প্রস্তাবনা ভি 1.1 2 য় সংস্করণের 3.3 এবং 3.4 বিভাগে বলা হয়েছে যে এসভিজি ডকুমেন্টের টুকরোগুলি (একটি এসভিজিএসভিজিলেট থেকে বংশধর গাছ) গাছের গভীরতার প্রথম অনুসন্ধান বলা হয় যা ব্যবহার করে রেন্ডার করা হয় । এই প্রকল্পটি শব্দটির প্রতিটি অর্থে অ্যাজেড।

জে অর্ডার আসলে কম্পিউটারের সত্যিকারের 3 ডি রেন্ডারিংয়ের প্রয়োজনীয়তা এবং রে ট্রেসিংয়ের চাহিদা গণনা করার জন্য এড়াতে কম্পিউটার ভিশন শর্টকাট। একটি এসভিজি ডকুমেন্ট খণ্ডে উপাদানগুলির অন্তর্নিহিত জেড-সূচকের জন্য লিনিয়ার সমীকরণ।

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

এটি গুরুত্বপূর্ণ কারণ আপনি যদি একটি বৃত্তের নীচে একটি বৃত্তের উপরে যেতে চান তবে আপনি কেবল বৃত্তের আগে স্কোয়ারটি sertোকান। এটি জাভাস্ক্রিপ্টে সহজেই করা যায়।

সমর্থনকারী পদ্ধতি

এসভিজিলেমেন্ট উদাহরণগুলিতে দুটি পদ্ধতি রয়েছে যা সহজ এবং ইজ জেড অর্ডার ম্যানিপুলেশন সমর্থন করে।

parent.removeChild (শিশু)
পূর্বসূরি

সঠিক উত্তর যা কোনও জগাখিচুড়ি তৈরি করে না

যেহেতু SVGGElement ( <g> ট্যাগ) সরানো এবং ঠিক সহজেই কোনও এসভিজি সার্কেলএলমেন্ট বা অন্য কোনও আকারের মতো সন্নিবেশ করা যায়, তাই অ্যাডোব পণ্যগুলির সাধারণ ইমেজ স্তরগুলি এবং অন্যান্য গ্রাফিক্স সরঞ্জামগুলি খুব সহজেই এসভিজিজিলেমেন্ট ব্যবহার করে প্রয়োগ করা যেতে পারে। এই জাভাস্ক্রিপ্টটি মূলত মুভ কমান্ড কমান্ড।

parent.insertBefore(parent.removeChild(gRobot), gDoorway)

এসভিজিজিলেটমেন্ট জি-রবোটের বাচ্চাদের হিসাবে আঁকা একটি রোবটের স্তরটি যদি এসভিজিজিলেটমেন্ট জিডুরওয়ের শিশুদের মতো আঁকা দরজার আগে ছিল, তবে রোবটটি এখন দ্বারপথের পিছনে রয়েছে কারণ দ্বারপথের জেড ক্রম এখন রোবটের জেড ক্রম হিসাবে একরকম।

একটি মুভ অ্যাবওয়ার্ড কমান্ড প্রায় সহজ।

parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())

এটি মনে রাখতে কেবল a = a এবং b = b ভাবেন think

insert after = move above
insert before = move below

ভিউয়ের সাথে সামঞ্জস্যপূর্ণ একটি রাজ্যে ডিওএম ছেড়ে চলেছে

এই উত্তরটি সঠিক হওয়ার কারণ হ'ল এটি ন্যূনতম এবং সম্পূর্ণ এবং অ্যাডোব পণ্যগুলি বা অন্যান্য ভাল নকশাকৃত গ্রাফিক্স সম্পাদকগুলির অভ্যন্তরীণগুলির মতো অভ্যন্তরীণ উপস্থাপনাটিকে এমন একটি রাজ্যে ফেলে দেয় যা রেন্ডারিং দ্বারা নির্মিত দৃষ্টিভঙ্গির সাথে সামঞ্জস্যপূর্ণ।

বিকল্প কিন্তু সীমিত পদ্ধতির

সাধারণত ব্যবহৃত অন্য পদ্ধতির মধ্যে সিএসএস জেড-ইনডেক্সটি একাধিক এসভিজি ডকুমেন্ট টুকরা (এসভিজি ট্যাগ) এর সাথে একত্রে ব্যতীত সমস্ত অংশে স্বচ্ছ ব্যাকগ্রাউন্ডের সাথে একত্রে ব্যবহার করা হয়। আবার এটি এসভিজি রেন্ডারিং মডেলটির কমনীয়তাটিকে পরাভূত করে জেড ক্রমের সাহায্যে অবজেক্টগুলিকে উপরে বা নীচে নিয়ে যাওয়া শক্ত করে তোলে।

মন্তব্য:

( https://www.w3.org/TR/SVG/render.html v 1.1, দ্বিতীয় সংস্করণ, 16 আগস্ট 2011)

৩.৩ একটি এসভিজি ডকুমেন্ট খণ্ডে রেন্ডারিং অর্ডার উপাদানগুলির একটি অন্তর্নিহিত অঙ্কন ক্রম রয়েছে, এসভিজি নথি খণ্ডের প্রথম উপাদানগুলি "আঁকা" হয়েছে। পরবর্তী উপাদানগুলি পূর্ববর্তী আঁকা উপাদানের শীর্ষে আঁকা হয়।

৩.৪ গ্রুপগুলি কীভাবে রেন্ডার করা হয় যেমন 'g' এলিমেন্টের মতো গোষ্ঠীকরণের উপাদানগুলি (ধারক উপাদানগুলি দেখুন) একটি অস্থায়ী পৃথক ক্যানভাস উত্পাদনের প্রভাবকে স্বচ্ছ কালো থেকে শুরু করে যার উপরে শিশু উপাদানগুলি আঁকা হয়। গোষ্ঠীর সমাপ্তির পরে, গোষ্ঠীর জন্য নির্দিষ্ট করা কোনও ফিল্টার প্রভাবগুলি পরিবর্তিত অস্থায়ী ক্যানভাস তৈরি করতে প্রয়োগ করা হয়। সংশোধিত অস্থায়ী ক্যানভাসটি গোষ্ঠীতে কোনও গ্রুপ-স্তরের মাস্কিং এবং অস্বচ্ছতা সেটিংস বিবেচনায় নিয়ে পশ্চাদপটে সংশ্লেষিত হয়।

— ডগলাস দাসেকো
সূত্র

4

আমাদের ইতিমধ্যে 2019 রয়েছে এবং z-indexএখনও এসভিজিতে সমর্থিত নয়।

আপনি মজিলায় SVG2 সমর্থন সাইটে দেখতে পাচ্ছেন যে রাজ্যের জন্য z-index- প্রয়োগ করা হয়নি ।

আপনি বাগ বাগ 360148 এও দেখতে পাবেন "এসভিজি উপাদানগুলির উপর 'জেড-ইনডেক্স' সম্পত্তি সমর্থন করুন" (রিপোর্ট করা: 12 বছর আগে)।

এটি সেট করার জন্য আপনার কাছে এসভিজিতে 3 সম্ভাবনা রয়েছে:

সঙ্গে element.appendChild(aChild);
সঙ্গে parentNode.insertBefore(newNode, referenceNode);
সহ targetElement.insertAdjacentElement(positionStr, newElement);(এসভিজির জন্য আইইয়ের কোনও সমর্থন নেই)

ইন্টারেক্টিভ ডেমো উদাহরণ

এই 3 টি ফাংশন সহ।

var state = 0,
    index = 100;

document.onclick = function(e)
{
    if(e.target.getAttribute('class') == 'clickable')
    {
        var parent = e.target.parentNode;

        if(state == 0)
            parent.appendChild(e.target);
        else if(state == 1)
            parent.insertBefore(e.target, null); //null - adds it on the end
        else if(state == 2)
            parent.insertAdjacentElement('beforeend', e.target);
        else
            e.target.style.zIndex = index++;
    }
};

if(!document.querySelector('svg').insertAdjacentElement)
{
    var label = document.querySelectorAll('label')[2];
    label.setAttribute('disabled','disabled');
    label.style.color = '#aaa';
    label.style.background = '#eee';
    label.style.cursor = 'not-allowed';
    label.title = 'This function is not supported in SVG for your browser.';
}

label{background:#cef;padding:5px;cursor:pointer}
.clickable{cursor:pointer}

With: 
<label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label>
<label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br>
<label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label>
<label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label>
<br>
<svg width="150" height="150" viewBox="0 0 150 150">
    <g stroke="none">
        <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/>
        <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/>
        <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/>
    </g>
</svg>

স্নিপেট প্রসারিত করুন

— ভরত
সূত্র

2

টিকে থাকার জন্য এসভিজি উপাদানটি পুশ করুন, যাতে এর জেড-ইনডেক্স শীর্ষে থাকবে। এসভিজিতে জেড-ইনডেক্স নামে কোনও সম্পত্তি নেই। উপাদানটিকে শীর্ষে আনতে জাভাস্ক্রিপ্টের নীচে চেষ্টা করুন।

var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);

লক্ষ্য: এটি এমন একটি উপাদান, যার জন্য আমাদের এটি শীর্ষ এসভিগিতে আনতে হবে: উপাদানগুলির ধারক

— ভাসিম আব্দুল সামাদ
সূত্র

0

এটি করা সহজ:

আপনার আইটেম ক্লোন করুন
ক্লোন করা আইটেম বাছাই করুন
ক্লোন দ্বারা আইটেম প্রতিস্থাপন

function rebuildElementsOrder( selector, orderAttr, sortFnCallback ) {
	let $items = $(selector);
	let $cloned = $items.clone();
	
	$cloned.sort(sortFnCallback != null ? sortFnCallback : function(a,b) {
  		let i0 = a.getAttribute(orderAttr)?parseInt(a.getAttribute(orderAttr)):0,
  		    i1 = b.getAttribute(orderAttr)?parseInt(b.getAttribute(orderAttr)):0;
  		return i0 > i1?1:-1;
	});

        $items.each(function(i, e){
            e.replaceWith($cloned[i]);
	})
}

$('use[order]').click(function() {
    rebuildElementsOrder('use[order]', 'order');

    /* you can use z-index property for inline css declaration
    ** getComputedStyle always return "auto" in both Internal and External CSS decl [tested in chrome]
    
    rebuildElementsOrder( 'use[order]', null, function(a, b) {
        let i0 = a.style.zIndex?parseInt(a.style.zIndex):0,
  		    i1 = b.style.zIndex?parseInt(b.style.zIndex):0;
  		return i0 > i1?1:-1;
    });
    */
});

use[order] {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="keybContainer" viewBox="0 0 150 150" xml:space="preserve">
<defs>
    <symbol id="sym-cr" preserveAspectRatio="xMidYMid meet" viewBox="0 0 60 60">
        <circle cx="30" cy="30" r="30" />
        <text x="30" y="30" text-anchor="middle" font-size="0.45em" fill="white">
            <tspan dy="0.2em">Click to reorder</tspan>
        </text>
    </symbol>
</defs>
    <use order="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="0" y="0" width="60" height="60" style="fill: #ff9700; z-index: 1;"></use>
    <use order="4" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="50" y="20" width="50" height="50" style="fill: #0D47A1; z-index: 4;"></use>
    <use order="5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="15" y="30" width="50" height="40" style="fill: #9E9E9E; z-index: 5;"></use>
    <use order="3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="25" y="30" width="80" height="80" style="fill: #D1E163; z-index: 3;"></use>
    <use order="2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="30" y="0" width="50" height="70" style="fill: #00BCD4; z-index: 2;"></use>
    <use order="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="5" y="5" width="100" height="100" style="fill: #E91E63; z-index: 0;"></use>
</svg>

স্নিপেট প্রসারিত করুন

— tdjprog
সূত্র