কীভাবে একটি <svg> উপাদানটিকে তার পিতামাতার ধারককে প্রসারিত বা চুক্তি করতে হবে?


112

লক্ষ্যটি হল <svg>উপাদানটি তার পিতামাতার ধারকের আকারে প্রসারিত করা, এই ক্ষেত্রে ক<div> , এটি ধারক যত বড় বা ছোট হোক না কেন।

কোড:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

এই সমস্যার সর্বাধিক সাধারণ সমাধান বলে মনে হচ্ছে viewBoxএটি <svg>উপাদানটিতে অ্যাট্রিবিউট সেট করছে ।

viewBox="0 0 widthOfContainer heightOfContainer"

তবে উপাদানগুলির মধ্যে উপাদানগুলির <svg>পূর্বনির্ধারিত প্রস্থ এবং / অথবা উচ্চতা রয়েছে এমন ক্ষেত্রে এটি কাজ করবে বলে মনে হয় না । উদাহরণস্বরূপ,<rect> উপরের কোডটিতে উপাদানটির প্রস্থ এবং উচ্চতা সুস্পষ্টভাবে সেট করা আছে।

সুতরাং সুস্পষ্ট সমাধান হ'ল সেই উপাদানগুলির উপরও% প্রস্থ এবং% উচ্চতা ব্যবহার করা। কিন্তু এটি এমনকি করা আছে? বিশেষত, যেহেতু <img src=test.svg >সুস্পষ্টভাবে কোনও সমস্যা ছাড়াই সূক্ষ্মভাবে কাজ করে এবং প্রসারিত / চুক্তিগুলি করে<rect> উচ্চতা এবং প্রস্থের ।

যদি উপাদানগুলি <rect>এবং এর মতো অন্যান্য উপাদানগুলির শতকরা হারে প্রস্থ এবং উচ্চতা নির্ধারণ করতে হয় তবে সেট করতে ইঙ্কস্কেপে কোনও উপায় আছে যাতে <svg>ডকুমেন্ট সহ সমস্ত উপাদান নির্দিষ্ট মাত্রার পরিবর্তে শতাংশের প্রস্থ, উচ্চতা ইত্যাদি ব্যবহার করতে পারে .. ?


1
<Img src = "file.svg" /> এর মতো কোনও চিত্র হিসাবে রেফারেন্সের চেয়ে এসভিজিটিকে কোনও ফাইল হিসাবে সংরক্ষণ করুন এবং আপনি যেভাবে প্রস্থ: 100% বা উচ্চতা: 100%
বুড়িমি

উত্তর:


56

viewBox, ধারক উচ্চতা নয় এটি আপনার অঙ্কন আকার আছে। আপনার viewBoxপ্রস্থে 100 ইউনিট হতে সংজ্ঞায়িত করুন, তারপরে আপনার rect10 ইউনিট হতে হবে। এর পরে, আপনি যদি এসভিজি স্কেল করে বড় rectহন তবে চিত্রটির প্রস্থ 10% হবে।


33
তবে প্রশ্নটি হল: এসভিজি কীভাবে স্কেল করবেন?
অ্যাড্রিয়ান হেইন

6
@ অ্যাড্রিয়ানল্যাং যখন আপনি এসভিজি অবজেক্টে কোনও আকার নির্ধারণ করেন তখন স্কেলিংটি স্বয়ংক্রিয়ভাবে ঘটে, যেমনটি ইতিমধ্যে প্রশ্নের কোডে করা হয়েছে। উদাহরণের একটি নির্দিষ্ট সংস্করণ এখানে
রবার্টক

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

2
আমি অনুমানের অনুপাতটি সংরক্ষণ না করেই আকারটিকে অনুভূমিকভাবে এবং উলম্বভাবে জোর করতে বাধ্য করার জন্য সেই ফিডটিতে কিছুটা ছোট ছোট টুইট করেছি এবং এটি আইই-তে কাজ করতে বাধ্য করেছি, যদিও জমা দেওয়া ফ্রিডাল @ রবার্টকটি হয়নি। আশা করি এটি কাউকে রাস্তায় নামতে সাহায্য করবে!
মিস্টার ক্রিমসন

3
ডিফল্টরূপে আপনার এসজিজি যতটা সম্ভব স্কেল করবে যাতে এটি সম্পূর্ণ দৃশ্যমান হয় তবে এটির দিক অনুপাতটি সংরক্ষণ করে (সুতরাং একটি বর্গক্ষেত্রবক্স সম্পূর্ণরূপে একটি আয়তক্ষেত্রাকার পূর্ণ করবে না)। আপনি যদি সত্যিই এটি প্যারেন্ট পাত্রে সম্পূর্ণ আবরণ করতে বাধ্য করতে চান তবে এসভিজি উপাদানটিতে preservAspectRatio = "কিছুই নয়" যুক্ত করুন
প্যাট্রিকসুরি

24

ধরুন আমার কাছে একটি এসভিজি রয়েছে যা দেখতে এটির মতো দেখাচ্ছে: pic1

এবং আমি এটি একটি ডিভিতে রাখতে এবং এটি ডিভিটি প্রতিক্রিয়াশীলভাবে পূরণ করতে চাই। আমার এটি করার পদ্ধতি নিম্নরূপ:

প্রথমে আমি এসভিজি ফাইলটি ইনসকেপের মতো অ্যাপ্লিকেশনটিতে খুলি। ফাইল-> নথির বৈশিষ্ট্যগুলিতে আমি নথির প্রস্থ 800px এবং উচ্চতা 600px (আপনি অন্যান্য আকার নির্বাচন করতে পারেন) তে সেট করে রেখেছি। তারপরে আমি এই ডকুমেন্টে এসভিজি ফিট করি।

pic2

তারপরে আমি এই ফাইলটিকে একটি নতুন এসভিজি ফাইল হিসাবে সংরক্ষণ করব এবং এই ফাইল থেকে পথের ডেটা পাব। এখন এইচটিএমএলে কোডটি যাদুটি করে:

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

নোট করুন যে এসভিজির প্রস্থ এবং উচ্চতা উভয়ই 100% এ সেট করা আছে, যেহেতু আমরা এটি ধারকটি অনুভূমিকভাবে এবং অনুভূমিকভাবে পূরণ করতে চাই তবে ভিউবক্সের প্রস্থ এবং উচ্চতা ইনসক্যাপে নথির প্রস্থ এবং উচ্চতা সমান যা 800px এক্স 600px। আপনার পরবর্তী যে কাজটি করা দরকার তা হ'ল সংরক্ষণের অনুপাতটি "কিছুই নয়" তে সেট করুন। আপনার যদি এই বৈশিষ্ট্যটি সম্পর্কে আরও তথ্যের প্রয়োজন হয় তবে এখানে ভাল লিঙ্ক । এবং এটি সব আছে।

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

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

আশা করি এটা সাহায্য করবে!


5
সংরক্ষণের জন্য +1 স্পেকট্রেটিও নোট। কোনও ডিভিতে প্রসারিত (স্কেল নয়) এসভিজি পাওয়ার জন্য উচ্চ এবং নিম্ন শিকারের পরে, এটি সঠিক উত্তর ছিল।
অ্যাডেলফাস

@ গাজরিস, এই দুর্দান্ত উত্তরের জন্য ধন্যবাদ একই প্রশ্ন আছে। আমার এসভিজি যদি বাসা বেঁধে থাকে What উদাহরণস্বরূপ, <svg> <svg id = "1"> </svg> <svg id = "2"> </svg> </svg> আমি শর্তাধীন এসভিজি 1 এবং 2 প্রদর্শন করতে চাই এবং এটির প্রস্থ এবং উচ্চতা নেওয়া উচিত ধারক <div id = "ধারক" শৈলী = "প্রস্থ: 200px; উচ্চতা: 200px;"> </div> আপনি এই বিষয়ে আমাকে সাহায্য করতে পারেন?
প্রসাদ পরব

@ রেজা বড়দারান: জিনিয়াস।
ড্যানম্যাড

6

আমার জন্য সম্প্রতি যা কাজ হয়েছে তা হ'ল ট্যাগ এবং সমস্ত শিশু ট্যাগ থেকে সমস্ত height=""এবং width=""বৈশিষ্ট্য মুছে ফেলা <svg>। তারপরে আপনি পিতামাতার ধারকের উচ্চতা বা প্রস্থের শতাংশ ব্যবহার করে স্কেলিং ব্যবহার করতে পারেন।


5
আপনি একটি কাজের উদাহরণ দিতে পারেন? আমি এই কিছু করতে পারি না।
মাইকেল

2

@ রবার্টক এর ঠিক আছে, তবে আপনার এটিও খেয়াল svg, #containerকরতে হবে যার ফলে এসভিজি 100% (একবারের জন্য #containerএবং একবারের জন্য svg) ব্যতীত অন্য কোনও কিছুর জন্য ক্ষতিকারকভাবে মাপানো যায় ।

অন্য কথায়, আমি যদি উভয় উপাদানগুলিতে 50% h / w প্রয়োগ করি তবে এটি আসলে 50% এর 50%, বা .5 * .5 এর সমান, যা .25 বা 25% স্কেলের সমান।

@ রবার্টক পরামর্শ হিসাবে ব্যবহার করলে একটি নির্বাচক ভাল কাজ করে।

svg {
  width:50%;
  height:50%;
}

যে কারণে আপনার নির্বাচক svg, #containerমিলে যায় উভয়svg DOM উপাদান এবং#container DOM উপাদান। আমি বিশ্বাস করি আপনি পরিবর্তে সন্ধান করেছিলেন svg #containerতবে আপনি যদি কোনও আইডি ব্যবহার করেন তবে পিতামাতার স্পেসিফিকেশন প্রয়োজন হয় না।
নিট

আমি কি বলেছিলাম ঠিক এটি নয়, "একবার # কন্টেইনার এবং একবার এসভিজির জন্য"?
জাস্টিন

1
ওহ ক্ষমা করুন, আপনি ঠিক বলেছেন, তবে আপনার উত্তরটি কিছুটা অদ্ভুতভাবে শব্দযুক্ত যা ভুল বোঝাবুঝির দিকে পরিচালিত করে। মনে হচ্ছে আপনি প্রথমে কোনও সম্ভাব্য গোটচের কথা বলছেন।
নিট

1

আপনার আইফোনটির জন্য আপনি নিজের মাথাটি ব্যবহার করতে পারেন:

"width=device-width"
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.