html শিখব - একটি এইচটিএমএল svg বস্তু এছাড়াও একটি ক্লিকযোগ্য লিঙ্ক তৈরি করুন




কাজ সকল (9)

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

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

যখন আমি এই কোড ব্লকটি ব্যবহার করি, svg বস্তুটি ক্লিক করে আমাকে Google এ নিয়ে আসে না। IE8 <স্প্যান টেক্সটটি ক্লিকযোগ্য।

আমি ট্যাগ ধারণকারী আমার svg ইমেজ সংশোধন করতে চান না।

আমার প্রশ্ন, আমি কিভাবে সিজিগ ছবি ক্লিকযোগ্য করতে পারি?


Answers

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

<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; এটা IE হিসাবে কাজ করে তোলে।

সবচেয়ে সহজ উপায় <object> ব্যবহার করা হয় না। পরিবর্তে একটি <img> ট্যাগ ব্যবহার করুন এবং নোঙ্গর ঠিক সূক্ষ্ম কাজ করা উচিত।


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

pointer-events: none;

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

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


জাভাস্ক্রিপ্ট দিয়ে এটি করুন এবং আপনার 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>

আপনি আপনার SVG এর নীচে </svg> মতো কিছু আটকে রাখতে পারেন (শেষ হওয়ার আগেই </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>

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


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

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

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


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

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

নোঙ্গর জন্য CSS এ নিম্নলিখিত যোগ করুন:

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>

লিংক svg এবং fallback উপর কাজ করে।


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

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


কয়েকটি কারণে, ফ্লেক্সবক্স বুটস্ট্র্যাপের চেয়ে অনেক ভাল:

  • বুটস্ট্র্যাপটি গ্রিড সিস্টেমটি তৈরির জন্য ফ্ল্যাট ব্যবহার করে, যা অনেকেই ওয়েবের জন্য বোঝেন না, যেখানে ফ্লেক্স-বাক্সটি আইটেমের আকার এবং সামগ্রীর জন্য নমনীয় থাকার দ্বারা বিপরীত করে। পিক্সেল বনাম এম / রিম ব্যবহার করে একই পার্থক্য, অথবা মার্জিন এবং প্যাডিং ব্যবহার করে শুধুমাত্র আপনার ডিভিগুলিকে নিয়ন্ত্রণ করতে এবং কোনও পূর্ব-নির্ধারিত আকারটি সেট না করে।

  • বুটস্ট্র্যাপ, এটি floats ব্যবহার করে, প্রতিটি সারির পরে clearfix প্রয়োজন, অথবা আপনি বিভিন্ন উচ্চতা divs পেতে হবে। ফ্লেক্স-বক্স এটি না করে এবং এর পরিবর্তে লম্বা ডিভিটির জন্য ধারক এবং তার উচ্চতায় লাঠি পরীক্ষা করে।

ফ্লেক্স বক্সের উপর বুটস্ট্র্যাপের সাথে একমাত্র কারণ ব্রাউজার সাপোর্টের অভাব (IE প্রধানত) (ইতিমধ্যে মরা)। এবং কখনও কখনও আপনি একই ওয়েবকিট ইঞ্জিন ব্যবহার করলেও Chrome এবং Safari থেকে ভিন্ন আচরণ পান।

সম্পাদনা:

বিটিডব্লিউটি যদি আপনার মুখোমুখি হওয়া একমাত্র সমস্যা সমান উচ্চতা কলাম তবে তার জন্য কয়েকটি সমাধান রয়েছে:

  • আপনি পিতামাতার display: table ব্যবহার করতে পারেন, একটি display: table-cell; সন্তানের উপর। ডিসপ্লেতে একই উচ্চতা কীভাবে পাওয়া যায় তা দেখুন : টেবিল-সেল

  • আপনি প্রতিটি div পরম পরম অবস্থান ব্যবহার করতে পারেন:
    position: absolute; top: 0; bottom: 0;

  • Jquery / js সমাধানও রয়েছে, এবং আরেকটি সমাধান আমি এই মুহুর্তে মনে রাখতে পারছি না যে আমি পরে যোগ করার চেষ্টা করব।

সম্পাদনা 2:

এছাড়াও http://chriswrightdesign.com/experiments/flexbox-adventures/ এবং https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties চেক করুন কিভাবে flex-box কাজ করে।

সম্পাদনা 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

সম্পাদনা 4: https://caniuse.com/#feat=flexbox





html object svg anchor