এসভিজিতে স্থির স্ট্রোক প্রস্থ


103

আমি কোনও এসভিজি উপাদানটিতে "পিক্সেল-সচেতন" হতে স্ট্রোক-প্রস্থ সেট করতে সক্ষম হতে চাই, বর্তমান স্কেলিং ট্রান্সফর্মেশনগুলি নির্বিশেষে সর্বদা 1px প্রশস্ত হবে। আমি সচেতন যে এটি অসম্ভব ভাল হতে পারে, যেহেতু এসভিজির পুরো পয়েন্টটি পিক্সেল স্বাধীন হতে হবে।

প্রসঙ্গ নিম্নলিখিত:

আমার এর ভিউবক্স এবং প্রিজারএস্পেক্টরেটিও বৈশিষ্ট্যগুলি সেট সহ একটি এসভিজি উপাদান রয়েছে। দেখে মনে হচ্ছে এরকম কিছু

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

এর অর্থ এই যে আমি যখন সেই উপাদানটি স্কেল করি তখন এর অভ্যন্তরের প্রকৃত আকারগুলি সেই অনুযায়ী স্কেল হয় (এখন পর্যন্ত এত ভাল)।

আপনি দেখতে পাচ্ছেন, আমি ভিউবক্সটি সেট আপ করেছি যাতে উত্সটি কেন্দ্রে থাকে। আমি সেই উপাদানটির মধ্যে একটি x- এবং y- অক্ষ আঁকতে চাই, যা আমি এইভাবে করি:

<line x1="-1000" x2="1000" y1="0" y2="0" />

আবার, এটি সূক্ষ্ম কাজ করে। আদর্শভাবে, যদিও, এই অক্ষটি সর্বদা কেবল 1px প্রশস্ত হবে। আমি যখন প্যারেন্ট এসভিজি উপাদানটি স্কেল করি তখন অক্ষগুলি মোটামুটি হয়ে উঠতে আগ্রহী না।

তাহলে কি আমি বকাঝকা?

উত্তর:


128

আপনি vector-effectসেট করা সম্পত্তি ব্যবহার করতে পারেন non-scaling-stroke, দস্তাবেজগুলি দেখুন । অন্য উপায় ব্যবহার করা হয় transform(ref)

এটি ব্রাউজারগুলিতে কাজ করবে যা এসভিজি টিনি 1.2 থেকে এই অংশগুলিকে সমর্থন করে, উদাহরণস্বরূপ অপেরা 10। ফলব্যাকের মধ্যে একই কাজ করার জন্য একটি ছোট স্ক্রিপ্ট লেখার অন্তর্ভুক্ত রয়েছে, মূলত সিটিএমকে উল্টানো এবং স্কেল করা উচিত নয় এমন উপাদানগুলিতে এটি প্রয়োগ করা।

আপনি যদি তীক্ষ্ণ রেখাগুলি চান তবে আপনি অ্যান্টিআলাইজিং ( shape-rendering=optimizeSpeedবা shape-rendering=crispEdges) অক্ষম করতে পারেন এবং / অথবা অবস্থানের সাথে খেলতে পারেন।


1
দুর্ভাগ্যক্রমে এটি XUL অ্যাপে রয়েছে এবং এটি ভেক্টর-ইফেক্টটিকে এখনও সমর্থন করে না বলে মনে হয়। আচ্ছা ভালো.
wxs

1
এটি ফায়ারফক্স ১৫ এ প্রদর্শিত হবে এবং এটি
ঠিকঠাকভাবে

2
আইই 11 এখনও vector-effectসম্পত্তি সমর্থন করে না । vector-effect: non-scaling-strokeআইই 11 এর মতো একই প্রভাব অর্জন করা কি সম্ভব ?
মার্লিন

1
@ আর্মলিন হ্যাঁ, জেএস সহ এটি আইইতে অনুকরণ করা সম্ভব।
এরিক ডাহলস্ট্রোম

3
@মার্লিন উপাদানটির ক্লোন করুন (এর fillজন্য স্থির noneএবং এর বিপরীতে stroke), উপযুক্ত রূপান্তরগুলি গণনা করুন এবং সেট করুন (ফিলিং অংশের জন্য একটি এবং স্ট্রোকের অংশের জন্য একটি)। এটি নিশ্চিতভাবে কিছুটা অগোছালো হতে চলেছে, তবে এটি রয়েছে - আপনি মাইক্রোসফ্টকে এর জন্য সমর্থন যুক্ত করতে চাইতেও পারেন। যাই হোক না কেন আমি মনে করি আপনার প্রশ্নটি এর নিজস্ব একটি প্রশ্ন হওয়ার যোগ্য।
এরিক ডাহ্লাস্ট্রোম 4'14
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.