স্ট্রোক-প্রস্থ কীভাবে সেট করবেন: এসভিজি আকারের নির্দিষ্ট কয়েকটি ক্ষেত্রে 1?

Question

স্ট্রোক-প্রস্থ নির্ধারণ: <rect>এসভিজির একটি উপাদানের 1 টি আয়তক্ষেত্রের প্রতিটি দিকে স্ট্রোক রাখে।

কোনও এসভিজি আয়তক্ষেত্রের মাত্র তিন দিকে কোনও স্ট্রোকের প্রস্থকে কীভাবে রাখে?

Answer 1

আপনার যদি স্ট্রোক বা নো-স্ট্রোকের প্রয়োজন হয় তবে আপনি এটি করার জন্য স্ট্রোক-দশার্রেও ব্যবহার করতে পারেন , ড্যাশগুলি এবং ফাঁকগুলি আয়তক্ষেত্রের পাশগুলির সাথে মিলিয়ে ।

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }

<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

Jsfiddle দেখুন ।

Comments

আমরা কেবলমাত্র রেকট এলিমেন্টের উপরে স্ট্রোকটি কীভাবে প্রদর্শন করতে পারি?

— সুরেশ

আপনি ব্যাখ্যা করতে পারেন কেন নির্দিষ্ট অবস্থানগুলিতে নির্দিষ্ট নম্বরগুলি এই প্রভাব দেয়?

— জ্যাকবআইআরআর

@ জ্যাকোবিআইআরআর 'স্ট্রোক-দশররে' সম্পত্তি (উত্তরের সাথে সংযুক্ত) এর সংজ্ঞা বোঝায়। এখানে ধারণাটি আয়তক্ষেত্রের পাশগুলির সাথে ড্যাশ দৈর্ঘ্যের সাথে মিলিত করা এবং ড্যাশ ফাঁকটি কোনও দিকের সাথে স্ট্রোক না করা উচিত with

— এরিক ডালস্ট্রোম

আমি সবেমাত্র আপনার সমাধানটি আপডেট করেছি, এই লিঙ্কে কোডেপেন.আইও

— শাশ্বতাত্রিপ্যাথি

এখানে একটি প্রোগ্রামেটিক সমাধান রয়েছে যা stroke-dasharrayকোন বস্তু নির্ধারণ করে যা কোন সীমানা প্রদর্শিত হবে তা নির্ধারণ করে। কোডটি পড়া আপনাকে এটি কীভাবে কাজ করে তা বুঝতে সহায়তা করতে পারে: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Answer 2

আপনি এসভিজিতে একক আকারের বিভিন্ন অংশের ভিজ্যুয়াল স্টাইল পরিবর্তন করতে পারবেন না (এখনও পাওয়া যায়নি ভেক্টর ইফেক্ট মডিউলটি অনুপস্থিত )। পরিবর্তে, আপনার প্রতিটি স্ট্রোক বা অন্যান্য ভিজ্যুয়াল স্টাইলের জন্য পৃথক আকার তৈরি করতে হবে যা আপনি পরিবর্তিত হতে চান।

বিশেষ করে এই ক্ষেত্রে, একটি ব্যবহারের পরিবর্তে <rect>বা <polygon>উপাদান আপনি একটি তৈরি করতে পারেন <path>অথবা <polyline>যে শুধুমাত্র আয়তক্ষেত্র তিন পক্ষের জুড়ে:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

আপনি এখানে কর্মের এগুলির প্রভাব দেখতে পাবেন: http://jsfiddle.net/b5FrF/3/

আরও তথ্যের জন্য <polyline>এবং আরও শক্তিশালী-তবে-আরও-বিভ্রান্তকারী <path>আকারগুলি সম্পর্কে পড়ুন।

Answer 3

আপনি তিনটি স্ট্রোকযুক্ত পক্ষের জন্য একটি পললাইন ব্যবহার করতে পারেন, এবং কেবল স্ট্রোকটিকে আয়তক্ষেত্রের উপরে রাখেন নি not আমার মনে হয় না এসভিজি আপনাকে কোনও পাথ / আকারের বিভিন্ন অংশে বিভিন্ন স্ট্রোক প্রয়োগ করতে দেয়, সুতরাং একই প্রভাব পেতে আপনাকে একাধিক অবজেক্ট ব্যবহার করতে হবে।