জাভাস্ক্রিপ্টের সাহায্যে, আমি কি কোনও এসভিজি <জি> উপাদানটির জেড সূচক / স্তরটি পরিবর্তন করতে পারি?

Question

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

Comments

দেখতে এখানে ।

— এলিরান মালকা

এসভিজির পুনরায় অর্ডার জেড-ইনডেক্সের

— optionচ্ছিক

Answer 1

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

Comments

ডকুমেন্টটির শেষে @ থিওনলিগুস্টি উপাদানসমূহ শীর্ষে রয়েছে। আপনি যদি jQuery ব্যবহার করে থাকেন তবে আপনার এমন কিছু ব্যবহার করতে সক্ষম হওয়া উচিত$('#thing-i-want-on-top').appendTo('#my-svg');

— অ্যাডাম ব্র্যাডলি

সুতরাং, মূলত, হোভারের উপরে কোনও আকারকে (জেড-অক্ষ) ভাসানোর কোনও উপায় নেই ...?

— ছারভে

jQuery এসভিজি পাথের ক্রম পরিবর্তন করার পক্ষে সমর্থন করে না।

— পাঠানো হয়েছে

@ ছারভে, আপনি পুনরায় অর্ডার দিয়ে জিনিসগুলি শীর্ষে ভাসতে পারেন - পুনরায় সংযোজন। এখানে একটি মার্জিত উদাহরণ: codepen.io/osublake/pen/YXoEQe

— ফ্রেজার কার্কম্যান

Answer 2

গাছটিতে সরানো উপাদানগুলির বিকল্প হ'ল এমন <use>উপাদানগুলি ব্যবহার করা হয় যেখানে আপনি xlink:hrefবৈশিষ্ট্যটি পরিবর্তন করেন যাতে এটি আপনাকে আপনার পছন্দমতো z আদেশ দেয়।

এখানে কিছু আকার সঞ্জীবিত করতে চাওয়ার প্রেক্ষাপটে এসভিজি-বিকাশকারী মেলিংলিস্টে এই বিষয়টি নিয়ে আলোচনা করার একটি পুরানো থ্রেড রয়েছে।

হালনাগাদ:

<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

এই উত্তরটি উদাহরণ সহকারে বা সেই মেলিং তালিকা থেকে প্রাপ্ত তথ্যের সাথে (যা গেটেড) অনেক বেশি কার্যকর হবে ।

— কায়োটিক

কাজ করে, তবে আপনাকে যথাযথভাবে ব্যবহার যুক্ত করে তোলে। আপনি যদি অনুবাদগুলি ব্যবহার করেন তবে <use> তাদের সম্পর্কে কোনও ধারণা নেই

— জোচেন বেডারসর্ডার

@ জোচেনবিডারসর্ডার নিশ্চিত হন না যে আপনার অর্থ কী, অনুবাদগুলি জেড অর্ডারের সাথে সম্পর্কিত কীভাবে?

— এরিক ডাহলস্ট্রোম

যে সম্পর্কে খুব পরিষ্কার ছিল না। আপনি যদি নেস্টেড <g> -ট্যাগগুলি রূপান্তরগুলির সাথে ব্যবহার করেন তবে আপনাকে getTransforToElement (..) ব্যবহার করে স্থানাঙ্কগুলি রূপান্তর করতে হবে; (এসভিজি ডক্স দেখুন)

— জোচেন বেডারসর্ডার

xlink:hrefhref

— অবচয়

Answer 3

এটি পুরানো প্রশ্ন, কিন্তু ...

ফায়ারফক্স (7+) এবং ক্রোমে (14+) আপনি শীর্ষে স্ভিজি_এলিমেন্টটি টানতে পারেন। এটি আপনাকে পূর্ণ z অক্ষ নিয়ন্ত্রণের স্বাধীনতা দেয় না, তবে এটি কোনও কিছুর চেয়ে ভাল better)

কেবল আবার সেই উপাদানটি যুক্ত করুন।

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

উল্লিখিত না হওয়া আরেকটি সমাধান হ'ল প্রতিটি এসভিজি আইটেম / আইটেমের সেটকে একটি ডিভের মধ্যে স্থাপন করা। আপনি সহজেই ডিভসের জেড-ইনডেক্স পরিবর্তন করতে পারেন।

ফিডল: ধারকগুলির জন্য জেড-ইনডেক্স সহ এসভিজি উপাদানগুলি চক্র

... সেই উপাদানটি সামনের দিকে 'চাপ' দিতে বোতামগুলিতে টিপুন। (বনাম পুরো সেটটি পুনরায় রঙ করা এবং 1 টি উপাদানকে সামনে চাপানো, তবে গ্রহণযোগ্য সমাধান হিসাবে মূল ক্রমটি রেখে)

আপেক্ষিক z সূচকগুলি পেয়ে খুব ভাল লাগবে ...

স্ট্যাকওভারফ্লো আমাকে কোডটি লাগিয়ে দিতে চাইছে এটি যদি জিসফিডেলের কোনও লিঙ্ক? ... ook

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

হ্যাঁ অর্ডার হ'ল যা নির্দিষ্ট করে যা অন্যটির সামনে কী বস্তু হবে। ক্রমটি পরিচালনা করতে আপনাকে ডিওএম সম্পর্কে জিনিসগুলি সরিয়ে নিতে হবে। Https://www.w3.org/TR/SVG11/render.html#RenderingOrder এ এসভিজি উইকিতে এর একটি ভাল উদাহরণ রয়েছে

Comments

সেই লিঙ্কটি আর কাজ করে না। এই লিঙ্কটি একই ধারণাটি ব্যাখ্যা করে: লিঙ্ক

— স্টিভ

Answer 6

আপনি যদি svg.js লাইব্রেরি ব্যবহার করেন তবে আপনি যে কোন উপাদানকে উপরে নিয়ে যেতে ".front ()" কমান্ডটি ব্যবহার করতে পারেন।

Answer 7

SVGরেন্ডারিংয়ের একটি "চিত্রকরনের মডেল" ব্যবহার করে। আউটপুট ডিভাইসে ক্রমান্বয়ে অপারেশনগুলিতে পেইন্ট প্রয়োগ করা হয় যাতে প্রতিটি অপারেশন আউটপুট ডিভাইসের কোনও কোনও অঞ্চলে রঙ করে। এলাকায় পূর্বে আঁকা এলাকায় ওভারল্যাপ যখন নতুন পেইন্ট আংশিক বা সম্পূর্ণভাবে old.- obscures এই লিঙ্কটি

Answer 8

এসভিজিতে, আরও বৃহত্তর জেড সূচক পেতে আপনার উপাদানটি ডিওএম গাছের নিচে নামানো উচিত। আপনি jQuery দিয়ে এটি করতে পারেন, এসভিজি উপাদানটি নির্বাচন করে, এটি সরিয়ে এবং আপনি যে অবস্থানটিতে চান তা আবার যুক্ত করে:

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

Answer 9

স্যামের জবাব সম্পর্কে অ্যাডাম ব্র্যাডলির মন্তব্য ঠিক পয়েন্টে ছিল। এটি কেবল সিএসএসের চেয়ে jQuery ব্যবহার করে তবে তিনি এটি বলেছেন:

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

যাইহোক, আমি যা তৈরি করছিলাম তার জন্য, হোভারে অন্য যে কোনও পথের উপরে হওয়া আমার আমার এসভিজি পাথের প্রয়োজন ছিল, তবে এখনও আমার এসভিজি পাঠ্যের নীচে। সুতরাং আমি এখানে যা এলাম তা এখানে:

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

অ্যাপেন্ডটো এবং সন্নিবেশপূর্ব উভয়ই আপনার উপাদানটিকে নতুন অবস্থানে নিয়ে যাবে আপনাকে ইচ্ছামত এসভিজি উপাদানটির গভীরতা পরিবর্তন করতে দেয় allowing