৪৮ ঘন্টার গবেষণার পরেও আমি আনুপাতিক স্কেলিংয়ের জন্য এটি শেষ করেছি:
দ্রষ্টব্য: এই নমুনাটি প্রতিক্রিয়া সহ লেখা হয়েছে। যদি আপনি এটি ব্যবহার না করে থাকেন তবে উটের কেস স্টাফটিকে হাইফেনে ফিরে যান (যেমন: পরিবর্তন backgroundColorকরুন background-colorএবং শৈলীতে Objectআবার পরিবর্তন করুন String)।
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
উপরের নমুনা কোডটিতে যা ঘটছে তা এখানে:
VIEWBOX
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Atribute/viewBox
মিনিট-এক্স, মিনিট-ওয়াই, প্রস্থ এবং উচ্চতা
যেমন: ভিউবক্স = "0 0 1000 1000"
ভিউবক্স একটি গুরুত্বপূর্ণ বৈশিষ্ট্য কারণ এটি মূলত এসভিজিকে বলে দেয় কোন আকারটি কোথায় আঁকতে হবে। আপনি যদি এসভিজি 1000x1000 পিক্স তৈরি করতে সিএসএস ব্যবহার করেন তবে আপনার ভিউবক্সটি 2000x2000 ছিল, আপনি নিজের এসভিজির উপরের বাম কোয়ার্টারটি দেখতে পাবেন ।
প্রথম দুটি সংখ্যা, মিনিট-এক্স এবং মিনিট-ওয়াই নির্ধারণ করে যে এসভিজিটি ভিউবক্সের অভ্যন্তরে অফসেট করা উচিত কিনা।
আমার এসভিজির উপরে / নীচে বা বাম / ডানদিকে স্থানান্তরিত হওয়া দরকার
এটি পরীক্ষা করুন: ভিউবক্স = "50 50 450 450"
প্রথম দুটি সংখ্যা আপনার এসভিজি বাম 50px এবং 50px উপরে স্থানান্তরিত করবে এবং দ্বিতীয় দুটি সংখ্যা ভিউবক্সের আকার: 450x450 পিক্স্স। যদি আপনার এসভিজি 500x500 হয় তবে এতে কিছু অতিরিক্ত প্যাডিং রয়েছে তবে আপনি "ভিউবক্স" এর মধ্যে এটিকে ঘুরিয়ে আনতে এই সংখ্যাগুলিকে ম্যানিপুলেট করতে পারেন।
এই মুহুর্তে আপনার লক্ষ্য হ'ল সেই সংখ্যার মধ্যে একটি পরিবর্তন করা এবং দেখুন কী ঘটে।
আপনি ভিউবাক্সকেও পুরোপুরি বাদ দিতে পারেন, তবে তারপরে আপনার মিলটি আপনার সময়ে থাকা অন্য প্রতিটি সেটিংয়ের উপর নির্ভর করে পরিবর্তিত হবে। আমার অভিজ্ঞতায় আপনি অনুপাত সংরক্ষণের সমস্যাগুলির মুখোমুখি হবেন কারণ ভিউবক্সটি অনুপাতের অনুপাতটিকে সংজ্ঞায়িত করতে সহায়তা করে।
সহায়তার অনুপাতটি সংরক্ষণ করুন
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Atribute/preservAspectRatio
আমার গবেষণার উপর ভিত্তি করে, প্রচুর পরিমাণে অনুপাতের সেটিংস রয়েছে, তবে ডিফল্টটিকে বলা হয় xMidYMid meet। আমি নিজেকে স্পষ্টভাবে মনে করিয়ে দেওয়ার জন্য এটি আমার উপর চাপিয়ে দিয়েছি। xMidYMid meetমিডপয়েন্ট এক্স এবং ওয়াইয়ের উপর ভিত্তি করে এটি আনুপাতিকভাবে স্কেল করে তোলে। এর অর্থ এটি ভিউবক্সে কেন্দ্রীভূত থাকে।
প্রস্থ
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Atribute/width
উপরে আমার উদাহরণ কোড দেখুন। আমি কীভাবে কেবল প্রস্থ নির্ধারণ করেছি, কোনও উচ্চতা নেই Notice আমি এটি 100% এ সেট করে রেখেছি যাতে এটিতে থাকা পাত্রে এটি পূরণ করে St এই স্ট্যাক ওভারফ্লো প্রশ্নের উত্তর দেওয়ার জন্য সম্ভবত এটি সবচেয়ে বেশি অবদান রাখছে।
আপনি যা পিক্সেল মান চান তা এটিতে পরিবর্তন করতে পারেন, তবে আমি এটি 100% এর মতো ব্যবহার করার পরামর্শ দেব যা আমি এটি সর্বোচ্চ আকারে ফুটিয়ে তুলতে চাই এবং তারপরে প্যারেন্ট পাত্রে CSS আমি এটি সুপারিশ করছি কারণ আপনি "যথাযথ" নিয়ন্ত্রণ পাবেন। আপনি মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন এবং আপনি উন্মাদ জাভাস্ক্রিপ্ট ছাড়াই আকারটি নিয়ন্ত্রণ করতে পারেন।
সিএসএস সহ স্কেলিং
আমার উদাহরণ কোড আবার দেখুন। আমার এই বৈশিষ্ট্যগুলি কীভাবে তা লক্ষ্য করুন:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
এটি অতিরিক্ত, তবে এটি আপনাকে দেখায় যে কীভাবে ব্যবহারকারীকে সঠিক দিক অনুপাত বজায় রেখে এসভিজির আকার পরিবর্তন করতে দেওয়া যায়। যেহেতু এসভিজি তার নিজস্ব দিক অনুপাত বজায় রেখেছে, আপনার কেবল প্যারেন্ট পাত্রে প্রস্থকে পুনরায় আকার পরিবর্তন করতে হবে এবং এটি পছন্দমতো আকার পরিবর্তন করবে।
আমরা উচ্চতাটি একা রেখে এবং / অথবা এটিকে অটোতে সেট করি এবং আমরা প্রস্থ সহ আকার পরিবর্তন করি। আমি প্রস্থটি বেছে নিয়েছি কারণ প্রতিক্রিয়াশীল ডিজাইনের কারণে এটি প্রায়শই অর্থবহ হয়।
এই সেটিংগুলির একটি চিত্র ব্যবহৃত হচ্ছে:
আপনি যদি এই প্রশ্নের প্রতিটি সমাধান পড়েন এবং এখনও বিভ্রান্ত হয়ে পড়েছেন বা আপনার কী প্রয়োজন তা বেশ কিছু না দেখতে পান তবে এই লিঙ্কটি এখানে দেখুন। আমি এটি খুব সহায়ক বলে মনে করেছি:
https://css-tricks.com/scale-svg/
এটি একটি বিশাল নিবন্ধ, তবে এটি এসএসজি, সিএসএস সহ বা ব্যতীত কারও সাথে চালিত করার সম্ভাব্য প্রতিটি উপায়কে ভেঙে দেয়। আমি আকস্মিকভাবে একটি কফি পান করার সময় বা আপনার পছন্দসই তরলগুলির পছন্দ করার সময় এটি পড়ার পরামর্শ দিই।
