সকল - কিভাবে html তৈরি করা যায়




একটি এইচটিএমএল svg বস্তু এছাড়াও একটি ক্লিকযোগ্য লিঙ্ক তৈরি করুন (7)

আমার এইচটিএমএল পৃষ্ঠায় আমার একটি 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 ইমেজ সংশোধন করতে চান না।

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


আপনি আপনার 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- এ স্মার্ট ব্যক্তিদের কাছে যায় - যেখানেই আমি এটি ব্যবহার করে দেখেছি।


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

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


আমি খুব svv ফাইল সম্পাদনা করে এই সমাধান।

আমি একটি গোষ্ঠী ট্যাগের পুরো SVG গ্রাফিকের XML টি আবৃত করেছি যার একটি ক্লিক ইভেন্ট নিম্নরূপ:

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

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


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

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 উপর কাজ করে।


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

pointer-events: none;

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

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


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

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

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


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

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




anchor