লক্ষ্যটি হল <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>
ডকুমেন্ট সহ সমস্ত উপাদান নির্দিষ্ট মাত্রার পরিবর্তে শতাংশের প্রস্থ, উচ্চতা ইত্যাদি ব্যবহার করতে পারে .. ?