এইচটিএমএল এসভিজি অবজেক্টকে একটি ক্লিকযোগ্য লিঙ্কও তৈরি করুন

Question

আমার এইচটিএমএল পৃষ্ঠায় আমার একটি এসভিজি অবজেক্ট রয়েছে এবং এটি একটি অ্যাঙ্কারে আবৃত করছি যাতে যখন এসভিজি চিত্রটি ক্লিক করা হয় তখন এটি ব্যবহারকারীকে অ্যাঙ্কর লিঙ্কে নিয়ে যায়।

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

আমি যখন এই কোড ব্লকটি ব্যবহার করি তখন এসভিজি অবজেক্টে ক্লিক করা আমাকে গুগলে নিয়ে যায় না। আইই 8 তে <স্প্যান পাঠ্য ক্লিকযোগ্য।

আমি ট্যাগগুলিতে আমার এসভিজি চিত্রটি পরিবর্তন করতে চাই না।

আমার প্রশ্ন হ'ল আমি কীভাবে এসভিজি চিত্রটিকে ক্লিকযোগ্য করে তুলতে পারি?

Answer 1

সবচেয়ে সহজ উপায় হ'ল <অবজেক্ট> ব্যবহার না করা। পরিবর্তে একটি <img> ট্যাগ ব্যবহার করুন এবং অ্যাঙ্করটি ঠিক কাজ করা উচিত।

Comments

Img ট্যাগটি সাধারণত যায় যেখানে স্প্যান ট্যাগটি করুণভাবে হ্রাস করতে হয়।

— অ্যাড্রিয়ান গারনার

কোনও এসভিজি ভেক্টর প্রদর্শন করার ধারণাটি কি কোনও চিত্র নয়?

— লুক

@ ErikDahlström কিন্তু <img>SVG তথ্য একটি রেফারেন্স সঙ্গে নেই সবসময় কাজের আশা হিসাবে, এমনকি ক্রোম :( এর সাম্প্রতিক সংস্করণে stackoverflow.com/questions/15194870/...

— dshap

@ জেনারজি যেমন এটি উল্লেখ করেছে, আপনি <object>ট্যাগটি ব্যবহার point-event: none;করতে এবং এটিকে ক্লিকযোগ্য করে তুলতে একটি যুক্ত করতে পারেন। এটি আপনার এসভিজি উত্স কোডে অ্যাক্সেস সংরক্ষণ করে এবং আপনাকে এটিকে গতিশীলভাবে ম্যানিপুলেট করার অনুমতি দেয়।

— এন্টোইন

একটি ব্যবহার imgসর্বদা একটি বিকল্প নয়। আমার ক্ষেত্রে, আমাকে এস.জি.জি. পরিচালনা করতে হবে যা সঠিকভাবে সম্পন্ন করা যায় না img, আমাকে ব্যবহার করতে হবে object।

— মার্টিজন

Answer 2

প্রকৃতপক্ষে, এটিকে সমাধান করার সর্বোত্তম উপায় হ'ল <<> ট্যাগটিতে, ব্যবহার করুন:

pointer-events: none;

দ্রষ্টব্য: যে ব্যবহারকারীরা অ্যাড ব্লকার প্লাগইন ইনস্টল করেছেন তারা উপরের ডানদিকে উপরের ডানদিকে একটি ট্যাব-জাতীয় [ব্লক] পান (ফ্ল্যাশ ব্যানার যেমন পাওয়া যায়)। এই সিএসএস সেটিংস করে, এটি পাশাপাশি চলে যাবে।

http://jsfiddle.net/energee/UL9k9/

Comments

দ্রষ্টব্য: আইই 11 তারিখ অবধি নিয়মিত উপাদানগুলির পয়েন্টার-ইভেন্টগুলিকে সমর্থন করবে না, তবে ইতিমধ্যে এসভিজিতে তাদের সমর্থন করে। Caniuse.com/pointer-events

— ওয়েবডেসার্টস

এই সমাধানটির একটি অপূর্ণতা (এবং পাশাপাশি নোলমেকজি থেকে একটি) হ'ল যদি আপনার এসভিজি ফাইলে একটি: হোভার সিলেক্টর সহ সিএসএস বিধি থাকে তবে এই বিধিগুলি কাজ করা বন্ধ করে দেবে। বেন ফ্রেন প্রস্তাবিত সমাধানটিতে এই সমস্যা নেই।

— ম্যাথিউইলসিকিউর

এটি উত্তর অনুমোদিত হতে হবে। imgএসভিজি দিয়ে ব্যবহার করা অভ্যন্তরীণ এসভিজি শৈলীর পরিবর্তনের জন্য অকেজো হয়ে যায়।

— কাডাভের

এটি অনুমোদিত উত্তর হতে হবে! সত্যিই দুর্দান্ত, ধন্যবাদ

— ড্যানিয়েল ব্রোগাগান 21

দুর্দান্ত উত্তর। আমি বিশ্বব্যাপী CSS এ দিয়ে আমার সর্বজনীন করেছি। অবজেক্ট [টাইপ * = "এসভিজি"] {পয়েন্টার-ইভেন্টস:

— কোনওটি নয় G

Answer 3

আমারও একই সমস্যা ছিল এবং এটির মাধ্যমে সমাধান করতে পেরেছি:

ব্লক বা ইনলাইন-ব্লকে সেট করা কোনও উপাদান সহ বস্তুকে মোড়ানো

<a>
    <span>
        <object></object>
    </span>
</a>

<a>ট্যাগ যুক্ত করা :

display: inline-block;
position: relative; 
z-index: 1;

এবং <span>ট্যাগ:

display: inline-block;

এবং <object>ট্যাগ:

position: relative; 
z-index: -1

এখানে একটি উদাহরণ দেখুন: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

এখানে কমেন্ট 20 এর মাধ্যমে পাওয়া গেছে https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Comments

ক্ষমা চাই, প্রদর্শনটি ভুলে গেছি: বস্তুর চারপাশে মোড়ানোর জন্য ইনলাইন-ব্লক / ব্লক উপাদান

— রিচার্ড

এখানে সেরা সমাধান!

— বালদরনি

এটি এই সমস্যার জন্য সর্বোত্তম সমাধান এবং সমস্ত ব্রাউজারে কাজ করে

— কল্পনা পোপট

যদি চিত্রটির স্বচ্ছ বিজি থাকে তবে সেই বিটগুলি ক্লিকযোগ্য হিসাবে উপস্থিত হবে না

— sobelito

এটি আমার পক্ষে কাজ করেছে, আমাকে উচ্চতাও যুক্ত করতে হয়েছিল: আমার পরিস্থিতিতে একটি এবং স্প্যান উপাদানগুলিতে 100%

— sk03

Answer 4

এর জন্য কৃতিত্ব নিতে চাই তবে আমি এখানে একটি সমাধান পেয়েছি:

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

অ্যাঙ্কারের জন্য সিএসএসে নিম্নলিখিতটি যুক্ত করুন:

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

লিঙ্কটি এসভিজি এবং ফলব্যাকে কাজ করে।

Comments

এটি মতে সবচেয়ে সহজ এবং সর্বাধিক সমর্থিত সমাধান

— টাইপ-স্টাইল

এটি এখনও একটি সমস্যা আছে: এসভিজি পয়েন্টার ইভেন্ট (অ্যানিমেশন) আর কাজ করছে না (মাউসওভার, মাউসআউট, ক্লিক করুন)! ঠিক পয়েন্টার-ইভেন্টগুলি ব্যবহার করার মতো: অবজেক্টটিতে নিজেও

— কোনওটিই নেই

Answer 5

আপনি নিজের এসভিজির নীচে এই জাতীয় কিছু আটকে রাখতে পারেন (ক্লোজিং </svg>ট্যাগের ঠিক আগে ):

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

তারপরে কেবল মামলাটির লিঙ্কটি সংশোধন করুন। আমি যে এসভিজিতে বসে এটি কভার করতে আমি 100% প্রস্থ এবং উচ্চতা ব্যবহার করেছি। প্রযুক্তিটির ক্রেডিট Clearleft.com- এর স্মার্ট লোকের কাছে যায় that's সেখানেই আমি এটি প্রথম দেখেছি।

Comments

আমার সাথে সিএসএস শৈলী রয়েছে: আমার এসভিজি ফাইলে এম্বেড থাকা সিলেক্টর হোভার। এটি একমাত্র সমাধান যা শৈলী নিষ্ক্রিয় করে না।

— ম্যাথিউলিউসেকার

Answer 6

রিচার্ডের সমাধানটির সরলকরণ। কমপক্ষে ফায়ারফক্স, সাফারি এবং অপেরাতে কাজ করে:

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

অতিরিক্ত সমাধানের জন্য http://www.noupe.com/tutorial/svg- ক্লিকযোগ্য-71346. html দেখুন ।

Comments

ধন্যবাদ, আমার পিতামাতাকে blockবা তার inline-blockউপর প্রদর্শন সেট করা দরকার <a>।

— উপাদান 119

গুড লিঙ্ক: noupe.com/inspiration/tutorials-inspiration/... হয়েছে অনুকূল এবং কনস প্রত্যেক সমাধানের জন্য।

— সার্জ Stroobandt

আমারও inline-blockকিছু ক্ষেত্রে ব্যবহার করা দরকার , তবে blockঅন্য ক্ষেত্রে খুব ভাল কাজ করেছে বলে মনে হয়েছিল; আমি অনুমান করি এটি ঘেরের ব্লকগুলির উপর নির্ভর করে ...

— গ্যুইনথ ল্লেওলিন

Answer 7

সমস্ত ব্রাউজারে এটি সম্পাদন করতে আপনাকে @energee, @ রিচার্ড এবং @ ফিউমার্মেল পদ্ধতিগুলির সংমিশ্রণটি ব্যবহার করতে হবে।

<a href="" style="display: block; z-index: 1;">
    <object data="" style="z-index: -1; pointer-events: none;" />
</a>

যোগ করার পদ্ধতি:

• pointer-events: none; এটি ফায়ারফক্সে কাজ করে তোলে।
• display: block; এটি ক্রোম এবং সাফারিতে কাজ করে।
• z-index: 1; z-index: -1; এটি পাশাপাশি কাজ করে।

Comments

@ জাজানপেজ আমি নিশ্চিত নই ... আইই 10 তে আমি এটি চেষ্টা করে দেখিনি :) এটি কাজ করে কিনা তা আমাকে জানান :)

— ক্রিস্টোফারস্ট্রিডোম

@ জায়েপেজ এটি গুরুত্বপূর্ণ নয়, কারণ objectএখন এটি পিতামাতার চেয়ে কম স্ট্যাকিং-প্রসঙ্গে (নীচে) থাকবে।

— জেসন টি ফেদারিংহাম

এটি কি আইফোন / মোবাইলে কাজ করে? আমার জন্য না ক্লিকযোগ্য / টেপযোগ্য নয়

— বাফ্রোমকা

Answer 8

আমি এসভিজি ফাইলটি সম্পাদনা করেও এটি সমাধান করেছি।

আমি পুরো এসভিজি গ্রাফিকের এক্সএমএলকে একটি গ্রুপ ট্যাগে আবৃত করেছি যাতে একটি ক্লিক ইভেন্ট রয়েছে:

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
 <!-- ... your graphics ... -->
</g>
</svg>

সমাধান সমস্ত ব্রাউজারগুলিতে কাজ করে যা অবজেক্ট এসভিজি স্ক্রিপ্ট সমর্থন করে। (ব্রাউজারগুলির জন্য আপনার অবজেক্ট উপাদানটির ভিতরে একটি ইমগ ট্যাগ ডিফল্ট করুন যা এসভিজি সমর্থন করে না এবং আপনি ব্রাউজারগুলির প্রচ্ছদটি কভার করবেন)

Comments

আপনি কী খুঁজে পেয়েছেন যে বাইরের <svg>উপাদানটিতে অন্লিক যুক্ত করা এবং এটি মোড়ানো মোটেই কার্যকর হয়নি?

— রবার্ট লংশন

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

— ব্রুস পেজলো

Answer 9

আমি এই পরিষ্কার সহজ পদ্ধতিটি ব্যবহার করে দেখেছি এবং সমস্ত ব্রাউজারে কাজ করছে বলে মনে হচ্ছে। এসভিজি ফাইলের অভ্যন্তরে:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  
<!--your graphic-->
  
</a>
</svg>
  

Comments

এই কাজটি করতে নিম্নলিখিত 'xlink' নেমস্পেসটি এসভিজি উপাদানটিতে যুক্ত করতে হবে: xmlns: xlink = " w3.org/1999/xlink "

— মেরে উন্নয়ন

অন্য কোনও সমাধান আমার পক্ষে কাজ করে নি তবে এইটি করেছে, হ্যাঁ, আপনাকে ধন্যবাদ!

— বাইটমাইপিক্সেল

যদিও আমার সাধারণত সরাসরি কোনও এসভিজি ফাইল পরিবর্তন করার বিষয়ে কোনও মানসিকতা না থাকলেও আমার দৃশ্যে আমি বিভিন্ন ভিন্ন লিঙ্কের জন্য একই এসভিজি ব্যবহার করি - এর অর্থ তাত্ত্বিকভাবে, আমাকে প্রত্যেকটির জন্য একটি আলাদা এসভিজি তৈরি করতে হবে। বিকল্পভাবে, অবশ্যই, আমি <svg> ট্যাগটিতে গ্রাফিক বিট ইনলাইন যুক্ত করতে পারি, তবে আমি সদৃশ কোডটি ঘৃণা করি (যদিও সত্যিকারের এসভিজি আমার কাছে পেয়েছে তা ছোট ...)

— গ্যুইনথ ল্লেওলিন

Answer 10

শুধু ব্যবহার করবেন না <object>। এখানে এমন একটি সমাধান রয়েছে যা আমার জন্য ট্যাগ করে <a>এবং <svg>ট্যাগ করেছে:

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
    height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
    2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
    1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
   6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
    </svg>
</a>

Comments

বিটিডব্লিউ আমি টেলওয়াইন্ড সিএসএস ব্যবহার করছি।

— এজে হুর্তর্ক

Answer 11

এটি জাভাস্ক্রিপ্টের onClickসাহায্যে করুন এবং আপনার- objectএলিমেন্টে একটি -রচনা যোগ করুন :

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
    <span>Your browser doesn't support SVG images</span>
</object>

Comments

আমি আশেপাশের <a> ট্যাগ সহ এবং ছাড়া উভয়ই এটি চেষ্টা করেছি এবং আমি এটি কাজ করতে পারি না। আমি লিনাক্সে এফএফ এবং ক্রোমে চেষ্টা করেছি। আপনি কোন ব্রাউজারে এটি ব্যবহার করে দেখেছেন?

— iancoleman

এটি দুর্দান্ত হয় যদি আপনি এটি চেষ্টা করে পরীক্ষা করে নিশ্চিত করতে পারেন যে এটি কাজ করে যাতে অন্যেরা যারা এটি পড়ে আপনার উত্তর সম্পর্কে আত্মবিশ্বাসী হতে পারে। "এটি অবশ্যই কাজ করবে" তাত্ত্বিকভাবে ঠিক আছে, তবে আমার জন্য এটি অবশ্যই অনুশীলনে কাজ করা উচিত।

— iancoleman

আমি উইন্ডোজের ক্রোম 45 এ এটি চেষ্টা করেছি এবং দেখে মনে হচ্ছে এটি ঠিক আছে। আমি একটি মোড়ানো অ্যাঙ্কর ছাড়াই সরাসরি একটি এসভিজি ট্যাগে অন ক্লিক করুন। ডাউনভোটরা কেন তা ব্যাখ্যা করলে ভাল লাগবে।

— চেজ