<object> ট্যাগ সহ এম্বেড করা জেদী এসভিজি কীভাবে স্কেল করব?

Question

আমার কাছে কিছু এসভিজি ফাইল রয়েছে যা নির্দিষ্ট করে widthএবং heightপাশাপাশি viewboxএটি:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

তবে আমি ঠিক করি এমন আকারে সেগুলি ব্রাউজারে কীভাবে প্রদর্শন করবেন? আমি তাদের আরও ছোট চাই এবং চেষ্টা করেছি:

<object width="400" data="image.svg"></object>

তবে আমি দৃশ্যমান স্ক্রোলবারগুলি পাই।

আমি যদি এসভিজি ফাইলগুলি সেট widthএবং heightতার 100%পরিবর্তে পরিবর্তিত করি তবে এটি কাজ করে তবে এসভিজি ফাইলে কোন আকার ব্যবহার করা যায় তা নির্বিশেষে আমি এইচটিএমএলে আকারটি নির্ধারণ করতে চাই। এটা কি সম্ভব ?

Comments

আমি বিভ্রান্ত, শেষ বাক্যটি আপনি যে সমাধানটির সন্ধান করছেন সেটির মতো পড়ে? এসভিজির প্রস্থ / উচ্চতা 100% / 100% এ সেট করে এটির এটিকে আঁকার জন্য অঞ্চলটি সংজ্ঞায়িত করতে এটি এটি HTML পর্যন্ত ছেড়ে দেয়?

— চিহ্নিত করুন

সমস্যাটি হ'ল আমি লাইব্রেরিতে এটি পরিবর্তন করার কোনও উপায় পাইনি যা আমি এসভিজি ফাইলগুলি তৈরি করতে ব্যবহার করি। আমি যদি এইচটিএমএল থেকে ওভাররাইড করতে পারি তবে এটি আমার কাছে বোধগম্য হবে। সুতরাং মূলত আমি ভাবছি এসভিজি ফাইলগুলি পরিবর্তনের পরিবর্তে অন্য কোনও সমাধান আছে কিনা।

— জিট্রাক্স

Answer 1

এটি <svg>সম্পাদন করার জন্য আপনি ট্যাগটিতে "preservAspectRatio" এবং "ভিউবক্স" বৈশিষ্ট্য যুক্ত করতে পারেন।

একটি সম্পাদকে .svg ফাইলটি খুলুন এবং <svg>ট্যাগটি সন্ধান করুন। এই ট্যাগে, নিম্নলিখিত বৈশিষ্ট্যগুলি যুক্ত করুন:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

ভিউবক্সের জন্য কিছু ডিফল্ট দিয়ে {প্রস্থ} এবং {উচ্চতা Rep প্রতিস্থাপন করুন। আমি এসভিজি ট্যাগের "প্রস্থ" এবং "উচ্চতা" বৈশিষ্ট্যগুলি থেকে মানগুলি ব্যবহার করেছি এবং দেখে মনে হচ্ছে এটি কার্যকর হয়।

এসভিজি সংরক্ষণ করুন এবং এটি এখন প্রত্যাশা অনুযায়ী স্কেল করা উচিত।

আমি এই তথ্য এখানে পেয়েছি:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

Comments

# এটিকে সংরক্ষণ করার জন্য আপনার যা যা করা দরকার তার সমস্ত প্রোটিট করুন = "এক্সমিনওয়াইমিন মিলন"

— সাম্যাকোন

@ সামকোন: মনে হচ্ছে কেবল preserveAspectRatio="xMinYMin meet"আমার পক্ষে যথেষ্ট ছিল না। viewBoxউত্তরে বর্ণিত হিসাবে আমারও একটি সরবরাহ করা প্রয়োজন । কৃপা!

— ফ্রেরিচ রাবাবে

আপনি preserveAspectRatio="none"যদি স্বেচ্ছাসেবী পদ্ধতিতে প্রসারিত করতে চান তবে আপনি এটি করতেও পারেন can

— ম্যাট ক্রিঙ্কলা-ভোগ্ট

আমি যেমন করেছি তেমন ইস্যুতে পড়ে যাবেন না: "ভিউবক্স"! = "ভিউবক্স" :)

— ডঃÜ

তদতিরিক্ত, আমাকে উত্তর100% হিসাবে উল্লিখিত হিসাবে প্রকৃত প্রস্থ এবং উচ্চতা বৈশিষ্ট্য সেট করতে হয়েছিল ।

— কমফ্রিচ

Answer 2

২০০৯ সালে যখন আমি এটি ফিরে জিজ্ঞাসা করেছি তখন এখানে দেওয়া উত্তরগুলির কোনওটিই আমার পক্ষে কাজ করেনি I এখন আমার আবার একই সমস্যাটি দেখেছি আমি লক্ষ্য করেছি যে <img>কোনও এসভিজি সহ ট্যাগ এবং প্রস্থ একসাথে ব্যবহার করা ভাল কাজ করে।

<img width="400" src="image.svg">

Comments

এটি অন্যান্য বিকল্পগুলির তুলনায় এত সহজ! কারও কৌতূহলের ক্ষেত্রে, এখানে একটি টেবিল রয়েছে যার মধ্যে ব্রাউজারগুলি এসএমজি <img> ট্যাগগুলিতে পরিচালনা করতে পারে ।

— ডিমো 414

এসভিজিতে হাইপারলিংক না থাকলে এটি সেরা পাথ হতে পারে, অন্যথায়, img অপর্যাপ্ত, এবং এখনও একটি এম্বেডের মতো বিকল্প ব্যবহার করতে হবে।

— এসডুপটন

আপনি যখন ব্যবহার করেন <img>আপনি লিঙ্ক, জাভাস্ক্রিপ্ট, ইত্যাদির সাথে সমস্ত ইন্টারঅ্যাক্টিভিটি হারাবেন

— gille3

অপ্রাপ্তবয়স্ক: আইএমজি উপাদানটি স্ব-বদ্ধ হওয়া উচিত, অর্থাৎ <img width="400" src="image.svg"/>।

— জান আগারার্ড

@ জনআগার্ড: এক্সএইচটিএমএল ব্যতীত আইএমজি ট্যাগটি বন্ধ করার দরকার নেই।

— পিটার ভি।

Answer 3

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এমবেডড এসভিজি তে পৌঁছতে পারেন:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

যেহেতু আপনার এসভিজিটি ইতিমধ্যে একটি ভিউবক্স রয়েছে তাই ফায়ারফক্সের ভিউবক্সে 576 পিক্সেল প্রস্থটি আপনার নথিতে 400 পিক্সেল প্রস্থে স্কেল করা উচিত। অন্যান্য এসএইজেজেএস বিজ্ঞাপনের প্রস্থ এবং উচ্চতা থেকে প্রাপ্ত নতুন ভিউবক্স থেকে উপকৃত হতে পারে (এগুলি প্রায়শই একই সংখ্যা হয়)। অন্যান্য ব্রাউজারগুলি বিভিন্ন এসভিজি টুইটগুলি থেকে উপকৃত হতে পারে।

Comments

এটি আমাকে দিয়েছে:Security error: attempted to read protected variable

— জিতরেক্স

এসভিজি কি আপনার ওয়েব পৃষ্ঠার মতো একই ডোমেনে হোস্ট করা আছে?

— জোফোরকার

এটি (লোকালহোস্ট থেকে বাহ্যিক) ছিল না তাই এটি সম্ভবত এটি থ্যাঙ্কস, তবে আমি নীচে আমার উত্তরটি সহজ হিসাবে ব্যবহার করে শেষ করেছি।

— Zitrax

Answer 4

<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img / logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

এই সেটআপটি আমার পক্ষে কাজ করেছিল।

Comments

এটি আসলে বেশ ভাল কাজ করে! আসলে গুরুত্বপূর্ণ জিনিসটি আসলে সংজ্ঞা দেওয়া হয় viewBox="0 0 640 80"। স্পষ্টতই যদি এটি সংজ্ঞায়িত না হয় তবে আপনি প্রকৃতপক্ষে এটিকে স্কেল করতে পারবেন না বা সিএসএসকে উদাহরণস্বরূপ width: 100%ইত্যাদি ব্যবহার করে এটি আপনার জন্য স্কেল করতে দেবেন না

— ইগোর

Answer 5

আমি এমন একটি সমস্যার মুখোমুখি হয়েছি যেখানে কোনও আইপ্যাডের আইওএস কোনও <object>ট্যাগে এসভিজি চিত্রগুলি সঠিকভাবে আকার না দেয় ।

সিএসএস স্টাইলটি ধারকটির আকার বাড়াতে বা কমিয়ে দেবে <object>, তবে এর ভিতরে থাকা চিত্রটি পরিবর্তন করা হবে না (আইপ্যাডে, আইওএসে 7)।

এসভিজি চিত্রগুলি অ্যাডোব ইলাস্ট্রেটর থেকে রফতানি করা হয়েছিল এবং সমাধানটি এর প্রস্থ এবং উচ্চতা প্রতিস্থাপন করে বেরিয়ে এসেছে:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

সঙ্গে:

width="100%" height="100%"

আমার <object>ট্যাগটি ব্যবহার করা দরকার কারণ <img>ট্যাগটি বর্তমানে এসভিজিতে বিটম্যাপযুক্ত চিত্রগুলি এম্বেডিং সমর্থন করে না।

Comments

এটি সঠিক উত্তর বিশেষত আপনার যদি ইনলাইন এসভিজি থাকে এবং <img ট্যাগ ব্যবহার না করেন! পারফেক্ট!

— গ্রেগ এলিস

Answer 6

1. অনুপস্থিত ভিউবক্সটি সেট করুন এবং এসভিজি ট্যাগে সেট উচ্চতা এবং উচ্চতার বৈশিষ্ট্যের উচ্চতা এবং প্রস্থ মান পূরণ করুন

2. তারপর দ্বারা কেবল ছবি আকার পরিবর্তন উচ্চতা এবং প্রস্থ সেটিং থেকে পছন্দসই শতাংশ মান। শুভকামনা।

3. আপনি preservAspectRatio = "x200Y200 মিলিতের সাথে একটি নির্দিষ্ট দিক অনুপাত সেট করতে পারেন, তবে এটি প্রয়োজনীয় নয়

যেমন

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Answer 7

ব্রাউজারকে এসভিজির আকার পরিবর্তন করতে কেবল CSS ব্যবহার করুন! ভালো লেগেছে: আরও তথ্যের জন্য http://www.vlado-do.de/svg_test/<object style="width:30%"> দেখুন । আমি কেবল স্থানীয়ভাবে এটি একটি এসভিজি দিয়ে চেষ্টা করেছি যার প্রস্থ এবং উচ্চতা "পিটি" দেওয়া আছে। এটি ফায়ারফক্সে ভাল কাজ করে।

Answer 8

চল দেখি. এসভিজিতে আমাকে আমার স্মৃতি সতেজ করতে হয়েছিল, আমি এত বছর এটি ব্যবহার করি নি।

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

নির্দেশিত হিসাবে, আপনি শতাংশে এসভিজির আকার নির্দিষ্ট করে দিন বা একটি ভিউবক্স নির্দিষ্ট করুন (যেমন ভিউবক্স = "0 0 600 500")।

এখন, আপনার যদি রফতানি হওয়া এসভিজি পরিবর্তন করার কোনও উপায় না থাকে তবে আপনি ভাগ্য থেকে দূরে, আমি ভয় করি fear আপনি কোন লাইব্রেরি ব্যবহার করেন?

Comments

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

— জিতরেক্স

Answer 9

জিম কেলারের উত্তরের উপর ভিত্তি করে কোয়েরিপথ ব্যবহার করে এখানে একটি পিএইচপি সমাধান রয়েছে ।

কোয়েরিপথটি লোড হয়ে গেলে আপনার এসভিজি স্ক্রিপ্টটি ফাংশনে দিন pass

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}